Simple jQuery test using "toggle" function, not behaving as expected

Question

I've constructed a simple test with jQuery to see if I can get an element to show/hide upon the clicking of a button.

HTML file:

<link href="test.css" rel="stylesheet" type="text/css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="test.js" type="text/javascript"></script>
<input type="submit" id="show" value="Show content">
<div class="hidden">
Some content!
</div>

CSS file:

.hidden {
 display: none;
}

Javascript file:

$(document).ready(function () {
$('#show').toggle(function () {
 $('.hidden').removeClass('hidden');
}, function () {
 $('.hidden').addClass('hidden');
});

});

... on the first click of the button, the content shows as expected, however on the second click it doesn't disappear. Can anybody tell me why?

Answer 1

Your issue is that once the class hidden is removed you cannot select by it.

Regardless you can simply call .toggle() to show or hide the element.

http://docs.jquery.com/Effects

Answer 2

Use toggleClass instead:

$(document).ready(function () {
    $('#show').toggleClass('hidden');
});

Answer 3

Try something more like:

HTML file:

<link href="test.css" rel="stylesheet" type="text/css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="test.js" type="text/javascript"></script>
<input type="submit" id="show" value="Show content">
<div id="mydiv" class="hidden">
Some content!
</div>

CSS file:

.hidden {
 display: none;
}

Javascript file:

$(document).ready(function () {
$('#show').toggle(function () {
        $('#mydiv').removeClass('hidden');
}, function () {
        $('#mydiv').addClass('hidden');
});

});

Answer 4

Simple. You are using the $('.hidden') selector to find the element with the 'hidden' class. However, on your first click of the button, you remove the hidden class.

You then have no items with that class, so it can't find one to show again.

Better would be:

<input type="submit" id="show" value="Show content">
<div class="toggle hidden">
Some content!
</div>

$(document).ready(function () {
  $('#show').toggle(function () {
    $('.toggle').removeClass('hidden');
  }, function () {
    $('.toggle').addClass('hidden');
  }
);

Answer 5

You can also use .show() and .hide(), though I think .toggle() is a more elegant solution (other things equal).

Answer 6

Here's a breakdown of what is happening with your code:

$(document).ready(function () {
    $('#show').toggle(function () {
        $('.hidden').removeClass('hidden'); <-- this removes the class of hidden
    }, function () {
        $('.hidden').addClass('hidden'); <!-- this tries to add the class of hidden, but your selector is '.hidden' so it isn't possible.
});

Try this:

$(document).ready(function () {
    $('#show').toggle(function () {
        $('#show').removeClass('hidden');
    }, function () {
        $('#show').addClass('hidden');
});

Or a better way even:

$(document).ready(function () {
    $('#show').toggle();
});