Question

I want to to partially display a list and then when a button is clicked i’d like to change the class of the button and show the full list by using the full height of the div, then when the button is clicked again i’d like it to start from its initial reveal, not hide the 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;
   });

Answer 1

You’ll have to create your own toggler. Simple and 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” is the height in pixels to toggle to when sliding up.

Fiddle: http://jsfiddle.net/QV38D/