Soucis menu drop down on click

Bonjour !

Je viens vers vous car j'ai un soucis, j'ai fais un menu drop down qui est censé s'appliquer sur plusieurs boites de texte.

Or, lorsqu'on clique sur le bouton, cela ouvre toujours la même boite.

J'aimerai appliquer de facon indépendante un titre > une boite et que la boite prenne la taille de contenant.

De plus j'aurais aimer savoir comment changer l'apparence du bouton, et avoir un aspect de texte simple.


voici mon html


<div id="topbar">
<div id="sections_btn_holder"><button onclick="toggleNavPanel('sections_panel')">Q: Comment nous contacter ?<span id="navarrow">▾</span></button></div>
<div id="sections_panel">
<div>R: Vous pouvez nous contacter dans la section du formulaire en ligne ou en envoyant un mail &agrave; [email protected]</div>
</div>
</div>


Le css


div#topbar > #sections_btn_holder > button{ background:#FFF;}
div#topbar > #sections_panel{ position:relative; height:0px; width:550px; overflow:hidden; z-index:10000; /*transition: height 0.3s linear 0s;*/ }
div#topbar > #sections_panel > div{ background:#FFF; padding:5px; height:auto; color:#222; }


Script js

<script type="text/javascript">// <![CDATA[
function toggleNavPanel(x){ var panel = document.getElementById(x), navarrow = document.getElementById("navarrow"), maxH="150px"; if(panel.style.height == maxH){ panel.style.height = "0px"; navarrow.innerHTML = "&#9662;"; } else { panel.style.height = maxH; navarrow.innerHTML = "&#9652;"; } }
// ]]></script>


Voilà, merci d'avance.

 

Merci bcp pour la réponse !!

Et oui je fais un site avec une personne x))

EDIT : comment je change de le la hateur par la display dans le truc ?