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: ' 02B';
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