How Can I Collapse A Specific Part Of An Accordion Styled On Page Load

I have got links from several pages linking to a specific page where my accordion grid is. And on page load I want the target part of the accordion grid to collapse automatically f

Solution 1:

You can built your own simple accorion with jQuery, no need ui.

For collapsing a specific part of an accordion with eq() method with this simple accordion structure.

Here is jsFiddle with hover trigger.

jQuery:

$('.content').slideUp(100);
$('.content').eq(1).slideDown(600);
//for collapsing second part of an accordion

$('.panel').hover(function() {//openvar takeID = $(this).attr('id');//takes id from clicked ele
    $('.content').stop(false,true).slideUp(600);
    //used stop for prevent conflict
    $('#'+takeID+'C').stop(false,true).slideDown(600);
    ///show's hovered ele's id macthed div
});​

html:

<div class="panel"id="panel1">panel1</div>
<div class="content"id="panel1C">content1</div>

<div class="panel"id="panel2">panel2</div>
<div class="content"id="panel2C">content2</div>

<div class="panel"id="panel3">panel3</div>
<div class="content"id="panel3C">content3</div>

----------

Here is jsFiddle with click trigger and close button.

jQuery:

$('.content').slideUp(100);
$('.content').eq(1).slideDown(600);
//for collapsing second part of an accordion

$('.panel').click(function() {//openvar takeID = $(this).attr('id');//takes id from clicked ele
   $('#'+takeID+'C').slideDown(600);//show's clicked ele's id macthed div
});
$('span').click(function() {//closevar takeID = $(this).attr('id').replace('Close','');//strip close from id
   $('#'+takeID+'C').slideUp(600);//hide clicked close button's panel
});​

html:

<divclass="panel"id="panel1">panel1</div><divclass="content"id="panel1C">content1<spanid="panel1Close">X</span></div><divclass="panel"id="panel2">panel2</div><divclass="content"id="panel2C">content2<spanid="panel2Close">X</span></div><divclass="panel"id="panel3">panel3</div><divclass="content"id="panel3C">content3<spanid="panel3Close">X</span></div>

Note: I've answered accordion related this answer before: collapse and expand tabs jquery / simple accordion