Question

How to make a sliding up horizontal DIV container using jquery? So far I have the below-provided code. The problem is that the content of <h1 id="filter_content">Content</h1> is initially not hidden. Also I’ve seen very nice looking sliding up menus, something like the first screenshot here. So, when user clicks on +, the content slides up. Where can I actually find a sample code or some example?

<div id="filter">
  <h1>Filter</h1><br>
</div>
<h1 id="filter_content">Content</h1>

<script>
$('#filter').click(function() {
    if ($("#filter").is(":hidden")) {
          $("#filter_content").show("slow");
        } else {
          $("#filter_content").slideUp("slow");
        }
    });
</script>

Answer 1

Hiya working demo click here or Initially hidden demo here

using slideToggle API: good read http://api.jquery.com/slideToggle/ Will do the trick for the exact behavior you are looking for.

code

$('#filter').click(function() {

          $("#filter_content").slideToggle("slow");

    });
​