Question

First, Sorry if I don’t speak good English.

My question is how do I make a div slide when I click a link using jQuery?

I have this:

<script type="text/javascript">
    function slide(div) {
        if($(div).css('display') === 'none'){ 
            $(div).delay(300).slideUp(500);
            return false;
        } else { 
            $(div).delay(300).slideUp(500);
            return false;
        }  
    }
</script>

<a href="#" onclick="slide('#div1');">Click here</a>

<div id="div1" style='display: none'>
    this will show
</div>

Does anybody have any idea what the problem is? Thank You

Answer 1

jQuery’s .slideUp() is specifically for hiding elements.

If you want to specifically SHOW the div, use .slideDown() to show.
You are also able to use .slideToggle() if you wanted to switch between showing / not showing.

Just change your .slideUp(‘s to .slideDown(‘s.

See this jsFiddle