JQuery - How to load external contents into one div, toggle div with sliding effect, and autoscroll down to see expanded div.

Question

On my HTML page, I have:

4 images sitting in a row, and 1 div sitting immediately underneath - collapsed.

Depending on which image the user clicks, I would like to load the corresponding external page content into that DIV (using ajaxpage.js?).

When the content gets loaded into the DIV, the DIV should toggle open with a sliding action. (using jquery.togglr.js?)

I also would like the browser to automatically scroll down to the expanded DIV, otherwise, the user might not see that extra content has been toggled open. The scrolling should have an easing effect. (using jquery.scrollTo.js?)

Finally, if the user clicks on the same image that toggled the DIV open, it should toggle the DIV close. If the user clicks on another image with the DIV already open, then just load the new content without having to close and open the DIV.

The difficulty is how to properly integrate all the different jquery plugins to get the desired behaviors?

Thanks.

Answer 1

Well, to start you'll need a click event handler on your 4 images:

$('img.fourImageCssClass').click(function(){
    // do something on click.  $(this) is an object that represents your clicked image
    var imgSrc = $(this).attr('src');
});

Next you'll need to grab a reference to your <div> in your click handler function:

var yourDiv = $('#div-id');

Then you can use the $.ajax() method to grab the content and load it into your div. Once that's done, the slideUp/slideDown functions will take care of opening/closing the div.

Finally to smoothly scroll, you can just animate the scrollTop property of the window. To know where to scroll to, you can get the offset() or postion() of your div.