Question

Basically what I’m trying to achieve is a slide toggle effect but not quite.

For example, I have a div which is set to a height of 200px and a anchor with a nested img tag. When a user clicks on the image the div will expand to a height of 500px and display the nested content which is within a ul.

To close the div there is a close icon on the bottom right which is an anchor containing a background image. When clicked the div will slide back to its previous height of 200px.

All suggestions are welcome

Here is my HTML to help:

Thanks,

Jordy

Answer 1

Using jQuery:

var $getStarted = $('#getstarted');
$('#open img').click(function(){
  if($getStarted.hasClass('opened')) {
    $('#close').trigger('click');
  } else {
     $getStarted.animate({height:'+=300px'},500,function(){
      // you're open
        $getStarted.addClass('opened');
     });
  }
  return false;
});
$('#close').click(function(){
  if($getStarted.hasClass('opened')) {
    $getStarted.animate({height:'-=300px'},500,function() {
      // you're closed again
       $getStarted.removeClass('opened');
    });
  }
  return false;
});

How about this?

Example here: http://jsfiddle.net/huF73/

Thanks,
MyStream