jquery - Reveal content by animating height (not hiding all content) -

i want to partially display list , when button clicked i'd change class of button , show full list using full height of div, when button clicked again i'd start initial reveal, not hide whole thing.

html:

<section id="newsletters"> <h4><a href="#rss"></a><span>related</span> button</h4>     <nav>         <ul>            <li>1</li>            <li>1</li>            <li>1</li>            <li>1</li>            <li>1</li>               </ul>     </nav> <a class="hide" href="#">show / hide </a></section> 

jquery

 $('section#newsletters .hide').click(function() {     $('section#newsletters nav').toggle(400);     return false;    }); 

you'll have create own toggler. simple , straight forward:

var toggle = true, oldheight = 0;  $('section#newsletters .hide').click(function(event) {     event.preventdefault();      var $ele = $('section#newsletters nav');     var toheight = ((toggle = !toggle) ? oldheight : 20);      oldheight = $ele.height();     $ele.animate({ height: toheight });  }); 

where "20" height in pixels toggle when sliding up.

fiddle: http://jsfiddle.net/qv38d/