Button does not work?

Question

So what im trying to do here is to show and hide div when i click button but it does not work and i dont know why.

script $(document).ready(function(){ $('article').addClass("hidden"); $('#hide').click(function() { var $this = $(this); if ($this.hasClass("hidden")) { $(this).removeClass("hidden").addClass("visible"); } else { $(this).removeClass("visible").addClass("hidden"); } }); });

Here is CSS

.hidden>div { display: none; } .visible>div { display: block; }

Here is HTML

<article> <button type="button" id="hide"></button> <div> <img /> <img /> </div> </article>

Viktor Kukurba · Accepted Answer · 2016-02-07 12:15:34Z

You should add class hidden to article instead of button

var $this = $(this).parent();

Selector .hidden>div adds style to first div child of element with class hidden.

ashfaq.p · Accepted Answer · 2016-02-07 12:19:58Z

Instead of putting if condition and then removing and adding classes, you can just toggle the class hidden.

$(document).ready(function(){ $('article').addClass("hidden"); $('#hide').click(function() { $('article').toggleClass('hidden') }); });

See this working demo: Toggle class

Stavros · Accepted Answer · 2016-02-07 12:23:10Z

$(document).ready(function(){ $('article').addClass("hidden"); $( '#hide' ).click(function() { if ( $( 'article' ).hasClass( "hidden" ) ) { $( 'article' ).removeClass("hidden").addClass("visible"); } else { $('article').removeClass("visible").addClass("hidden"); } }); });

You can use toggle also

whistling_marmot · Accepted Answer · 2016-02-07 12:43:22Z

Jquery has a toggle function that hides and shows selected elements. It also has hide and show functions that mean your css isn't needed.

$(document).ready(function(){ // Hide the div to start with. $('#divToHide').hide(); // When the button is clicked, toggle the div's visibility. $('#hide').click(function() { $('#divToHide').toggle(); }); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <article> <button type="button" id="hide">Click me to toggle the visibility of the div</button> <div id="divToHide"> Hello World! </div> </article> </body>

Collectives™ on Stack Overflow

Button does not work?

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related