Jquery - How To Load External Contents Into One Div, Toggle Div With Sliding Effect, And Autoscroll Down To See Expanded Div

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 corresp

Solution 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 imagevar 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.