如何使用JQuery在再次单击时隐藏div？

Question

CODE:

<script type="text/javascript">
$(document).ready(function() {
    $("#clicker").click(function() {
        $(".show_this").show();
        e.preventDefault();
    });
});
</script>

Using the script above I am able to show .show_this on clicking #clicker but on clicking #clicker again i want to hide it. How can I tweak my code to do that?

I did some research and it seemed that by using e.preventDefault(); I would be able to achieve that but it didn't work.

Answer 1

You can use toggle();

$(".show_this").toggle();

This will toggle every time, so if it is hidden it will show it and vice versa

Api Documentation: http://api.jquery.com/toggle

Also event.preventDefault(); will not be able to do this, though it is useful if the .show-this is a anchor tag because it will prevent the default action and that is to follow the link.

Answer 2

Use .toggle() instead.

$(document).ready(function() {
    $("#clicker").click(function(e) {
        $(".show_this").toggle();
        e.preventDefault();
    });
});

jsFiddle example

Answer 3

You can do this using the .toggle() method like:

$(document).ready(function() {
    $("#clicker").click(function(e) {  // call the event variable 'e' first here
        e.preventDefault();
        $(".show_this").toggle();            
    });
});