Question

I’m new to jQuery. I’m using .slideToggle to make a DIV appear at the bottom of all my content. I have got the code to make the DIV appear, and the page to scroll down to that DIV.

However, I want to make an additional button/link that would then hide the content and scroll back up.

The code I have got allows me to do all this but with only one link that toggles the show and hide, which isn’t very useful as I need the hide link to be at the bottom of all my content now.

Please let me know if you have any ideas of how to do this.

jQuery Code

var height = $('#slickbox').hide().height();
$('.more a').toggle(function() {
    $('#slickbox').slideDown(3200);
    $('html, body').animate({ scrollTop: '+=' + height }, 3200);
    return false;
}, function() {
    $('#slickbox').slideUp(3200);
    $('html, body').animate({ scrollTop: '-=' + height }, 3200);
    return false;
});

HTML

<div style="height: 300px; border: solid 1px #ddd;">I'm using space!</div>
<div class="donate done">
    <h3 class="more"><a href="#" title="More"> More </a></h3>
</div>
<div id="slickbox">
    <div id="slide_show">
        <div id="slider">
            <ul>
                <li>
                    <img alt="figure 1" src="http://dummyimage.com/700x1300/000/fff&text=I'm+a+picture!,+woohoo!" width="700" height="1300" />
                </li>
                <li>
                    <img alt="figure 1" src="http://dummyimage.com/700x1300/000/fff&text=I'm+a+picture!,+woohoo!" width="700" height="1300" />
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="close">
    <h3 class="more"><a href="#" title="More">Close</a></h3>
</div>

Here is an example of what I’ve got so far: http://jsfiddle.net/eMYJx/47/

When you click the more button, everything drops and scrolls the way I want. But when you press the close button, you have to press it twice. Any ideas on a way around this?

Answer 1

I would do it like this. Use one link that you toggle between More/Close. I use the animation callback to make the switch.

http://jsfiddle.net/eMYJx/49/

var height = $('#slickbox').hide().height();
$('.more a').toggle(function() {
    var $this = $(this);
    $('#slickbox').slideDown(3200);
    $('html, body').animate({ scrollTop: '+=' + height }, 3200, function() {
         $this.html('Close');
    });     
    return false;
}, function() {
    var $this = $(this);
    $('#slickbox').slideUp(3200);
    $('html, body').animate({ scrollTop: '-=' + height }, 3200, function(){
        $this.html('More');
    });
    $(this).html('More');
    return false;
});

Alternatively if you want to keep both buttons you would bind separate handlers to each. Both for click, but one ‘more’ would execute the first part of your toggle code and ‘close’ would execute the second half.