Question

I have this html structure:

<div id="home">

    <div class="section_header">
        <h1 class="left" data-target="newest"><?=lang('home_newest');?></h1>
        ...
    </div>
    <div id="newest">
        ...
    </div>

    <div class="section_header">
        <h1 class="left" data-target="best"><?=lang('home_newest');?></h1>
        ...
    </div>
    <div id="best">
        ...
    </div>

</div>

What I am trying to do is a toggle/show&hide function to work on click .section_header > h1 to show the div with the id defined in data-target inside h1 tag and hide the others, but always having one open and the #newest open by default on page load.

I have tried:

$('.section_header h1').click(function(){
    var selected = $(this).data('target');
    //$('#'+selected).hide().filter('#'+selected).show();
    $('#home > #'+selected).hide();
}).first().click();

The commented line doesn’t work, but the .hide only it does.

I found this: http://www.learningjquery.com/2007/02/more-showing-more-hiding and thought it could work but I didn’t succeed to tell it which div to close and show

Edit:
There is one more thing, how can it be done that when clicked on the visible div to close it and open the next one?

Answer 1

Try this one: http://jsbin.com/unetay/3/edit