eclipseIzHere eclipseIzHere - 2 months ago 6
Javascript Question

Jquery toggleclass and click not working

I have a button

<button id="expansion" class="btn btn-block btn-primary">
stuff
</button>


and when i click it, i want this to either appear or disappear

<div class="container-fluid" >
<div class="row">
<div class="col-md-12">
<div style="padding:0 7%;line-height:30px;text-align:justify;" id="expandable" class="dis">
<p>lol</p>
</div>
</div>
</div>




and this is my jquery function. but when i click the button, nothing happens.

$("#expansion").click(function(){
$("#expandable").toggleClass("dis");
});


class "dis" is just display:none;

Answer

You miss the . in declaration of class and use toggle instead of toggleClass

Here is working fiddle for you.

HTML

<button id="expansion" class="btn btn-block btn-primary">
    stuff
</button>

<div class="container-fluid" >
<div class="row">
    <div class="col-md-12">
        <div style="padding:0 7%;line-height:30px;text-align:justify;" id="expandable" class="dis">
                            <p>lol</p>
        </div>
    </div>
</div>

JS

$("#expansion").click(function(){
    $("#expandable").toggle(".dis");
});

CSS

 .dis{
  display:none;
}