Question

I have an accordion that is almost right.

HTML CODE:

    <footer>
    <div>
        <h1>Hide</h1>
        <h1>Hide</h1>
        <h1>Hide</h1>
        <h1>Hide</h1>
        <h1>Hide</h1>
        <h1>Hide</h1>
     <div>
</footer>
<h3><a href="" title="Open footer">Show</a></h3>

I do want that <h3><a href="" title="Open footer">Show</a></h3> stay always on the top and changes name to Hide when is active so, SHOW/HIDE.

I can not see away around. It is at: http://jsfiddle.net/FeGea/1

Answer 1

Try this: http://jsfiddle.net/UHztx/

$('footer').prev('h3').find('a').toggle(function() {
    var sb = $(this).parent().next('footer').slideDown(3200);
    $('html, body').animate({ scrollTop: '+=' + sb.data('expanded-height') }, 3000);
    $(this).text('Hide');
    return false;
}, function() {
    var sb = $(this).parent().next('footer').slideUp(3200);
    $(this).text('Show');
    return false;
});