Javascript click button, inverse function

Question

I need to know what is the mistake on this js code, I need that the click expand the div and at the second click the div come back to the original dimension This is the javascript:

<script> function myBurger() { 
    document.getElementById("burger").classList.toggle('expand'); 
    } 
    </script>

the relative html is this:

<div class="container" onclick="myBurger()">
  <input id="click" name="exit" type="checkbox" />
  <label for="click"><span class="burger"></span>       
</div>  

<div id="burger" > prova</div>

and this is the css:

 #burger{ 
 height: 10px; 
 width: 10px; 
 background-color: #fff; 
 top: 10%; 
 left: 10%; 
 position: absolute; 
 transition: height 2s ease, width 2s ease;
 } 

 #burger.expand{ 
 height: 200px; 
 width: 200px; 

 }

The complete code is there: www.figmentasergio.altervista.org

Your code works as expected, so what are you expecting? Describe desired behaviour. Just that you should close label tag — A. Wolff
– A. Wolff, Commented Dec 11, 2014 at 14:08
@j08691 Why would you use jQuery when you can use plain JavaScript? — Ruan Mendes
– Ruan Mendes, Commented Dec 11, 2014 at 14:14
@JuanMendes OP posted question using jQuery tag, that's why ;) — A. Wolff
– A. Wolff, Commented Dec 11, 2014 at 14:15
@j08691 I looked for a tag but didn't see one. toggle is a method of classList developer.mozilla.org/en-US/docs/Web/API/Element.classList — Ruan Mendes
– Ruan Mendes, Commented Dec 11, 2014 at 14:16

Ruan Mendes · Accepted Answer · 2014-12-11 14:23:30Z

4

It does work, you just don't see it because:

Your div doesn't cause anything to reflow
It doesn't have a background color or border

I've added a border to #burger so you can see it grow and shrink. I've also closed your <label> tag for tidiness.

function myBurger() {
    document.getElementById("burger").classList.toggle('expand');
}

#burger {
    height: 10px;
    width: 10px;
    background-color: #fff;
    top: 10%;
    left: 10%;
    position: absolute;
    transition: height 2s ease, width 2s ease;
    border: 1px red solid;
}
#burger.expand {
    height: 200px;
    width: 200px;
}

<div class="container" onclick="myBurger()">
    <input id="click" name="exit" type="checkbox" />
    <label for="click">
        <span class="burger"></span>
    </label>
</div>
<div id="burger">prova</div>

edited Dec 11, 2014 at 14:23

answered Dec 11, 2014 at 14:12

Ruan Mendes

92.7k31 gold badges161 silver badges225 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sergio Vento Over a year ago

But it doesn't work on my web page. I put the border on my version and it don't work. You can see it there: www.figmentasergio.altervista.org

Ruan Mendes Over a year ago

@SergioVento You don't have a class called .expand in your CSS. You can see that the expand class is correctly being added to #burger as you click. Also, there's no border on your webpage

Collectives™ on Stack Overflow

Javascript click button, inverse function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related