Jquery Show/hide

Question

I'm trying to make simple jquery code for show/hide function. But still I'm doing something wrong.

$(document).ready(function(){
    $('.arrow').click(function() {
        $('#box').show("slow");     
    });

    $('.arrow').click(function() {
        $('#box').hide("slow");
    }); 
    $('.arrow').click(function() {
        $('#box').show("slow");     
    }); 
});

http://jsfiddle.net/Armgh/

Answer 1

you can use any toggle with [slow, medium, fast] parameter also,

   $(document).ready(function(){
        $('.arrow').on('click', function() {
            $('#box').toggle("slow");  
        });
    });

Answer 2

use toggle:

$(document).ready(function(){
    $('.arrow').click(function() {
        $('#box').toggle('slow');       
    }); 
});

http://jsfiddle.net/Armgh/1/

or you can save your status and toggle manually:

$(document).ready(function(){
    var hidden = false;
    $('.arrow').click(function() {
        if (hidden) {
            hidden = true;
            $('#box').hide("slow");
        } else {
            hidden = false;
            $('#box').show("slow");
        }
    });
});

http://jsfiddle.net/Armgh/

EDIT

to use slideUp/slideDown, you can do:

$(document).ready(function(){
    var hidden = false;
    $('.arrow').click(function() {
        if (hidden) {
            hidden = false;
            $('#box').slideDown("slow");
        } else {
            hidden = true;
            $('#box').slideUp("slow");
        }
    });
});

http://jsfiddle.net/Armgh/3/

or use slideToggle

$(document).ready(function(){
    $('.arrow').click(function() {
        $('#box').slideToggle("slow");
    });
});

http://jsfiddle.net/Armgh/4/

Answer 3

You should simply use .toggle function:

$(document).ready(function(){

    $('.arrow').click(function() {
        $('#box').toggle("slow");     
    });

});