side-by-side accordion going to left

Question

I have a accordion which is side-by-side but the problem is when i open the first accordion on right side ( Section 5) its going to bottom on the below (Section 4) but i don,'t want this and also when the page will open in browser it should be below the (section 4). on left. i have try with different code....there are different different issue is comming.

here is the link

https://codepen.io/soumenework/full/gOGwmaP

 // Get all Accordion and Panel let accHeading = document.querySelectorAll(".ttb.accordion"); let accPanel = document.querySelectorAll(".ttb.accordion-panel"); for (let i = 0; i < accHeading.length; i++) { // Execute whenever an accordion is clicked accHeading[i].onclick = function() { if (this.nextElementSibling.style.maxHeight) { hidePanels(); // Hide All open Panels } else { showPanel(this); // Show the panel } }; } // Function to Show a Panel function showPanel(elem) { hidePanels(); elem.classList.add("active"); elem.nextElementSibling.style.maxHeight = elem.nextElementSibling.scrollHeight + "px"; } // Function to Hide all shown Panels function hidePanels() { for (let i = 0; i < accPanel.length; i++) { accPanel[i].style.maxHeight = null; accHeading[i].classList.remove("active"); } }

 * {box-sizing: border-box;}.accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; margin: 0; font-weight: 300; }.active, .accordion:hover, .accordion:hover::after { background-color: #007eff; color: white; }.ttb.accordion::after { content: '\002B'; color: #777; font-weight: bold; float: right; }.ttb.active::after { content: "\2212"; color: white; }.accordion-panel { padding: 0 18px; overflow: hidden; max-height: 0; transition: max-height 0.2s ease-out; }.dw { box-sizing: border-box; -moz-column-gap: 0; column-gap:10px; -moz-column-count: 2; column-count: 2; }.dw-pnl { -moz-column-break-inside: avoid; break-inside: avoid; } @media (max-width: 768px) {.dw { -moz-column-count: 1; column-count: 1; } }

 <div class="dw"> <div class="dw-pnl dw-pnl--fcs ttb "> <h2 class="accordion active">Section 1</h2> <div class="accordion-panel" style="max-height: 68px;"> <p>aaa Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> <div class="dw-pnl dw-pnl--fcs ttb"> <h2 class="accordion ">Section 2</h2> <div class="accordion-panel"> <p>aaa Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> <div class="dw-pnl dw-pnl--fcs ttb"> <h2 class="accordion ">Section 3</h2> <div class="accordion-panel"> <p>aaa Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> <div class="dw-pnl dw-pnl--fcs ttb"> <h2 class="accordion ">Section 4</h2> <div class="accordion-panel"> <p>aaa Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> <div class="dw-pnl dw-pnl--fcs ttb"> <h2 class="accordion ">Section 5</h2> <div class="accordion-panel"> <p>aaa Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> <div class="dw-pnl dw-pnl--fcs ttb"> <h2 class="accordion ">Section 6</h2> <div class="accordion-panel"> <p>aaa Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> <div class="dw-pnl dw-pnl--fcs ttb"> <h2 class="accordion ">Section 7</h2> <div class="accordion-panel"> <p>aaa Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> <div class="dw-pnl dw-pnl--fcs ttb no_opcity"> <h2 class="accordion ">Section 8</h2> <div class="accordion-panel"> <p>aaa Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> <div class="dw-pnl dw-pnl--fcs ttb no_opcity"> <h2 class="accordion ">Section 9</h2> <div class="accordion-panel"> <p>aaa Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> <div class="dw-pnl dw-pnl--fcs ttb no_opcity"> <h2 class="accordion ">Section 10</h2> <div class="accordion-panel"> <p>aaa Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> </div>

please help thank you

Answer 1

It seems that the problem with section 5 starting at the right side is because of > break-inside: avoid; < in your css code at line 54

Try changing that to auto or something else!

It also seemed that when opening section 5 it first opens on the right side.. i do not (yet) have an answer for that!