Estoy tratando de hacer un acordeón que pueda ocultarse y mostrarse según el título en el que he hecho clic. estoy usando jQuery para hacer eso

HTML

 <div class="panelContainer"><!-- 1ST PANEL--> <h2 class="h21">Do I need a website?</h2> <p class="contentBox">Morbi hendrerit accumsan orci, tristique aliquam nunc suscipit nec. Vestibulum consequat ornare nunc, ac tristique urna cursus id. Cras eu viverra leo, vitae rhoncus dui. Vestibulum rutrum neque ac risus eleifend luctus. Phasellus ultrices, enim quis dignissim tempus, nibh sem faucibus nisi, at blandit velit massa in nunc. Praesent enim libero, blandit sed massa ut, imperdiet dictum odio. Maecenas sagittis neque a est porta, at feugiat nulla tempor. Cras vitae tincidunt quam, non interdum quam. Sed imperdiet lacus nibh, eget viverra eros porta ut. Nulla sed tellus velit. Nullam quam dolor, malesuada eget bibendum a, lacinia ac ante.</p> </div> <div class="panelContainer"><!-- 2ND PANEL--> <h2 class="h21">What is SEO?</h2> <p class="contentBox">Aliquam felis orci, varius nec facilisis nec, eleifend ac ante. Donec ligula est, dapibus sed volutpat sit amet, pellentesque id sem. Vestibulum imperdiet volutpat dignissim. Morbi tincidunt lobortis libero et placerat. Pellentesque dignissim diam laoreet, ultricies ligula aliquam, consectetur sapien. Praesent luctus orci in vulputate tincidunt. Aenean fermentum ante non elementum convallis. Sed eget magna enim.</p> </div>

js

 var btnTitle=document.getElementsByClassName("h21"); var contentBox=document.getElementsByClassName('contentBox'); for(var i=0;i<btnTitle.length;i++){ btnTitle[i].addEventListener('click',function(){ var targetSection=document.querySelector(".panelContainer:nth-child(" + (i+1) + ")"); var targetContent=targetSection.querySelector(".contentBox"); for(let item of contentBox){ item.style.display='none'; } targetContent.style.display = 'block'; }); }