CODEWITHSUNDEEP
javascriptjquery
eclipseIzHere
eclipseIzHere

Reputation: 83

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;

Upvotes: 1

Views: 2759

Answers (3)

Naveen Kumar
Naveen Kumar

Reputation: 465

include jquery and toggle all are working fine after that you can hide and show 

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

Upvotes: 0

JC Hern&#225;ndez
JC Hern&#225;ndez

Reputation: 807

You need to assing a height to the element you want to click cuz it seems invisible.

Try this fiddle: https://jsfiddle.net/g72nr1sp/

HTML

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

CSS

.dis {
    display:none;
}
#expansion{
    background-color:lime;
    height:20px;
}

Javascript

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

Upvotes: 0

Ki v2
Ki v2

Reputation: 46

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;
}

Upvotes: 1

Related Questions