div tag that opens downward on mouse click

Question

I have a current webpage that is broken into two sections. The top section contains various controls for filtering content on the webpage, and the bottom section contains a grid of the content.

What I want is encapsulate the filter controls in a div tag that initially is completely hidden except for a button link that will say something like "Click to Expand". Upon clicking the button link the div will open up downward to expose the filter controls that are in it. However, I don't want the div to just suddenly appear, because that's too easy and boring. I want the opening of the div to be noticeable as it slides downward to expose the content.

Is this possible? If so, how do I go about achieving it? I'm not a CSS monkey, but I've done a fair amount with jQuery.

Thanks in advance for any suggestions.

Answer 1

Straight from http://api.jquery.com/animate/ ...

So, instead of clicking the div, you could just add the click function to a button somewhere else on the page.

---

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" 
  style="position: relative; left: 10px;" />

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
});

---

Answer 2

You can use the jQuery slideToggle().

$('#expandBtn').click(function() {
  $('#filterDiv').slideToggle('slow', function() {
    // Animation complete.
  });
});

Answer 3

As an alternative to jQuery there is also the scriptaculous.js blind down and slide down effects.