Clever Geek Handbook

Simple jQuery test using toggle function does not behave as expected

I built a simple test with jQuery to see if I can get an element to show / hide on button click.

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

});

... the first time the button is clicked, the content is displayed as expected, however the second click does not disappear. Can anyone tell me why?

+2


source to share


6 answers


Your problem is that after removing the hidden class, you cannot select it.

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



http://docs.jquery.com/Effects

+2


source


Use toggleClass instead:



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


source


Try something else:

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

});
+1


source


Simple. You use the $ ('. Hidden') selector to find an element with a "hidden" class. However, the first time you click the button, you are removing the hidden class.

You then have no items with this class, so it cannot find it 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');
  }
);
0


source


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

0


source


Here's a breakdown of what's going on 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 the following:

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

Or a better way:

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


source






More articles:


All Articles