display side by side collapsing sections

Question

I am currently working on a portfolio website using HTML, CSS, and vanilla JavaScript and I am working on some sections that collapse when clicked on. As you can see in the code snippet, the collapsing sections are one on top of the other. I would like to make the buttons side by side instead but I have no idea how to do so. I am fairly new at these languages as I only started a month ago.

 document.querySelectorAll(".collapse__button").forEach(button =>{ button.addEventListener("click", () =>{ const collapseContent = button.nextElementSibling; button.classList.toggle("collapse__button--active"); if (button.classList.contains("collapse__button--active")){ collapseContent.style.maxHeight = collapseContent.scrollHeight + "px"; }else{ collapseContent.style.maxHeight = 0; } }); });

 .collapse__button { /* display: inline-block; */ padding: 1em 2em ; background: var(--clr-dark); color: var(--clr-light); text-decoration: none; cursor: pointer; font-size: .8rem; text-transform: uppercase; letter-spacing: 2px; font-weight: var(--fw-bold); transition: transform 200ms ease-in-out; max-width: 200px; margin: 5em 5em; border: 8px var(--clr-accent); border-radius: 20px; } .collapse__button:hover{ transform: scale(1.1); background: var(--clr-accent); } .collapse__button::after{ content: "\\25be"; float: right; transform: scale(1); } .collapse__content{ overflow: hidden; max-height: 0; transition: max-height 0.2s; padding: 0 15px; } .collapse__button--active::after{ content: "\\25b4"; } .Title{ text-align: center; }

 <section class = "Title"> <p> Title of Example</p> <div class = "collapse"> <button class = "collapse__button"> Example 1 </button> <div class="collapse__content"> <p> writing </p> </div> </div> <div class = "collapse"> <button class = "collapse__button"> Example 2 </button> <div class="collapse__content"> <p> more writing </p> </div> </div>

Answer 1

 document.querySelectorAll(".collapse__button").forEach(button =>{ button.addEventListener("click", () =>{ const collapseContent = button.nextElementSibling; button.classList.toggle("collapse__button--active"); if (button.classList.contains("collapse__button--active")){ collapseContent.style.maxHeight = collapseContent.scrollHeight + "px"; }else{ collapseContent.style.maxHeight = 0; } }); });

 .collapse__button { /* display: inline-block; */ padding: 1em 2em ; background: var(--clr-dark); color: var(--clr-light); text-decoration: none; cursor: pointer; font-size: .8rem; text-transform: uppercase; letter-spacing: 2px; font-weight: var(--fw-bold); transition: transform 200ms ease-in-out; max-width: 200px; margin: 5em 5em; border: 8px var(--clr-accent); border-radius: 20px; } .collapse__button:hover{ transform: scale(1.1); background: var(--clr-accent); } .collapse__button::after{ content: "\\25be"; float: right; transform: scale(1); } .collapse__content{ overflow: hidden; max-height: 0; transition: max-height 0.2s; padding: 0 15px; } .collapse__button--active::after{ content: "\\25b4"; } .Title{ text-align: center; } .container { display: flex; }

 <section class = "Title"> <p> Title of Example</p> <div class="container"> <div class = "collapse"> <button class = "collapse__button"> Example 1 </button> <div class="collapse__content"> <p> writing </p> </div> </div> <div class = "collapse"> <button class = "collapse__button"> Example 2 </button> <div class="collapse__content"> <p> more writing </p> </div> </div> </div>

You did well. Just wrap your two collapsing sections (also called accordion component) with a div container and make that container in CSS flexbox. Which I did for you in your code. JS I didn't have to touch. Hope this helps.

Answer 2

Try creating another div that contains Example 1 and Example 2. Within the container display it as FlexBox. This should make them go side by side.

Here is what I did:

Let me know if you have any questions

 document.querySelectorAll(".collapse__button").forEach(button =>{ button.addEventListener("click", () =>{ const collapseContent = button.nextElementSibling; button.classList.toggle("collapse__button--active"); if (button.classList.contains("collapse__button--active")){ collapseContent.style.maxHeight = collapseContent.scrollHeight + "px"; }else{ collapseContent.style.maxHeight = 0; } }); });

 .collapse__button { /* display: inline-block; */ padding: 1em 2em ; background: var(--clr-dark); color: var(--clr-light); text-decoration: none; cursor: pointer; font-size: .8rem; text-transform: uppercase; letter-spacing: 2px; font-weight: var(--fw-bold); transition: transform 200ms ease-in-out; max-width: 200px; margin: 5em 5em; border: 8px var(--clr-accent); border-radius: 20px; } .collapse__button:hover{ transform: scale(1.1); background: var(--clr-accent); } .collapse__button::after{ content: "\\25be"; float: right; transform: scale(1); } .collapse__content{ overflow: hidden; max-height: 0; transition: max-height 0.2s; padding: 0 15px; } .collapse__button--active::after{ content: "\\25b4"; } .Title{ text-align: center; } .container { display: flex; justify-content: center; }

 <section class = "Title"> <p> Title of Example</p> <div class="container"> <div class = "collapse"> <button class = "collapse__button"> Example 1 </button> <div class="collapse__content"> <p> writing </p> </div> </div> <div class = "collapse"> <button class = "collapse__button"> Example 2 </button> <div class="collapse__content"> <p> more writing </p> </div> </div> </div> </section>

Answer 3

You can use display:table for this if you do not want to use Flexbox.

display:table works like this:

It works like an actual table; however; tables have semantic meaning, and they should not be used for layout. As an example, consider this poor-practice code that uses tables for layout:

 .topbar { background-color: blue; color:white; width: 100%; }

 <table class="topbar"> <tr> <td>Site Name</td> <td><label>Search: <input type="search" /></label></td> </tr> </table>

It looks like a top bar, but screen readers may get it confused with a table that holds actual data.

 document.querySelectorAll(".collapse__button").forEach(button => { button.addEventListener("click", () => { const collapseContent = button.nextElementSibling; button.classList.toggle("collapse__button--active"); if (button.classList.contains("collapse__button--active")) { collapseContent.style.maxHeight = collapseContent.scrollHeight + "px"; } else { collapseContent.style.maxHeight = 0; } }); });

 .collapse__button { /* display: inline-block; */ padding: 1em 2em; background: var(--clr-dark); color: var(--clr-light); text-decoration: none; cursor: pointer; font-size: .8rem; text-transform: uppercase; letter-spacing: 2px; font-weight: var(--fw-bold); transition: transform 200ms ease-in-out; max-width: 200px; margin: 5em 5em; border: 8px var(--clr-accent); border-radius: 20px; } #wrapper { display: table; } .container { display: table-row; } .collapse { display: table-cell; } .collapse__button:hover { transform: scale(1.1); background: var(--clr-accent); } .collapse__button::after { content: "\\25be"; float: right; transform: scale(1); } .collapse__content { overflow: hidden; max-height: 0; transition: max-height 0.2s; padding: 0 15px; } .collapse__button--active::after { content: "\\25b4"; } .Title { text-align: center; }

 <section class="Title"> <p> Title of Example</p> <div id="wrapper"> <div class="container"> <div class="collapse"> <button class="collapse__button"> Example 1 </button> <div class="collapse__content"> <p> writing </p> </div> </div> <div class="collapse"> <button class="collapse__button"> Example 2 </button> <div class="collapse__content"> <p> more writing </p> </div> </div> </div> </div> </section>