Question

I’d like to build a menu that when a menu item is clicked, a div will animate to a height of 400px and then load in new content.

When a new menu item is clicked, the box will animate to a height of 0, clear the old content, load in the new content and then animate back to a height of 400.

I’ve started the code with a toggle function, but I am a bit stuck on the loading part and how to incorporate it into the code.

Here is what I got so far

$('.menu').toggle(function(){
    $('.opened').animate({height: 0, opacity: 0}, 1000).removeClass('opened');
    $('#bodyContent').animate({height: 400, opacity: 1}, 1000).addClass('opened');

    },
 function(){
    $('#bodyContent').animate({height: 0, opacity: 0}, 1000).removeClass('opened');
});

HTML

 <a href="#" id="test">test</a>
 <a href="#" id="test2">test2</a>

Loading Content

$('#test').click(function() {
        $('#bodyContent').load('test.html');
    });

    $('#test2').click(function() {
        $('#bodyContent').load('test2.html');
    });

If I could have some help, that would be great!

Thanks

EDIT:

Here is my HTML content

<div id="bodyMenuWrapper">
  <ul id="menu">
    <li><a href="#" id="test" class="menu">TEST</a></li>
    <li><a href="#" id="test2" class="menu">TEST 2</a></li>
  </ul>
</div>
<div id="bodyContent">
  CONTENT LOAD HERE             
</div>

Answer 1

This is, as yet, unverified. But I think that the following should work:

$('a').click(
    function(){
        var id = this.id;
        $('#bodyContent').animate({'height' : '0'},500,
             function(){
                 $(this).load(this.id + '.html',
                     function(){
                         $('#bodyContent').animate({'height': '400px'},500);
                     });
             });
    });

If you can post your html structure then I may be able to post a more useful answer.