I have a code snippet below for an accordion list that I put together. I initially set the height for all the heading boxes to be uniform, but it seems like box A is displaying larger than the others. Can you help me figure out what went wrong? Any suggestions are appreciated. Thanks!
(function () {
var accordions, i;
// Checking browser compatibility
if (!document.querySelectorAll || !document.body.classList) return;
// Using a function to isolate each accordion
function makeAccordion(accordion) {
var targets, currentTarget, i;
targets = accordion.querySelectorAll('.accordion > * >h1 ');
for(i = 0; i < targets.length; i++) {
targets[i].addEventListener('click', function (e) {
if (e.target.parentNode.classList.contains("expanded")) {
e.target.parentNode.classList.remove("expanded")
} else {
if (currentTarget)
currentTarget.classList.remove('expanded');
currentTarget = this.parentNode;
currentTarget.classList.add('expanded');
}
}, false);
}
accordion.classList.add('js');
}
// Finding all the accordions
accordions = document.querySelectorAll('.accordion');
for(i = 0; i < accordions.length; i++) {
makeAccordion(accordions[i]);
}
})();<style>
/* Styling */
body {
padding: 2%;
}
.p{
padding:5px;
color:#007a5e
}
// More CSS styles...
</style> <section class="accordion js">
<section class="sections">
<h1>A</h1>
<div>
<input type="checkbox" class="read-more-state" id="post-1" />
<label for="post-1" class="read-more-trigger"></label>
<div class="read-more-wrap">
<div class="read-more-target"><p class="p">Feb</p>
</div>
</div>
</div>
<br style="line-height: 15px;"/>
// More HTML with sections B and C...
<br style="line-height: 15px;"/>
</section>