VladJ VladJ - 2 years ago 117
Javascript Question

How can I make a div disappear and reappear on button click?

I have this code so far :





<center><button class="button" id="button">CLUJ</button></center>

<div class="panel" id='panel'>
Universitatea Alexandru Ioan Cuza din Iasi <br><br>
Universitatea din Craiova <br><br>
Universitatea din Bucuresti <br><br>
Universitatea Babes-Bolyai din Cluj-Napoca <br><br>

1.The div doesn't hide;
2.How can I make the div appear and disappear on button click? (Something like an accordion)

Answer Source

You can use jQuery's fadeToggle like this:


And to initially hide the div, just add this to your css:

#panel    {

JSFIDDLE: https://jsfiddle.net/bgepfuhb/3/

For more than one panel, you can add unique IDs like this:

    <center><button class="button" id="buttonA">CLUJ</button></center>
    <div class="panel" id='panelA'>

    <center><button class="button" id="buttonB">CLUJ</button></center>

    <div class="panel" id='panelB'>

    <center><button class="button" id="buttonC">CLUJ</button></center>

    <div class="panel" id='panelC'>

JSFIDDLE: https://jsfiddle.net/bgepfuhb/7/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download