CODEWITHSUNDEEP
jquerycss
shan
shan

Reputation: 3145

How to make first part of accordion out until closed on page load?

I built an accordion a while ago that works perfectly, but now I need it so that the first part of it is out when the page loads. I'm unsure of how to do this.. I've tried changing the display and visibility settings of the first content block to block/show respectively, but I don't think I understand the slidetoggle well enough to actually modify this myself, and the documentation is confusing me a little..

Could anyone point me in the right direction?

$('#e1-2 .accord-header').click(function () {
    if ($(this).next('div').is(':visible')) {
        $(this).next('div').slideUp(300);
    } else {
        $('#e1-2 .accord-content').slideUp(300);
        $(this).next('div').slideToggle(300);
    }
});

There's my jquery, and here's a fiddle of my code.

Any help would be very much appreciated! Thanks!

Upvotes: 1

Views: 120

Answers (3)

WayneDenier
WayneDenier

Reputation: 327

You can approach this two ways...

1) Initial State

I permit inline styles on elements very rarely, but since most jQuery animations use the display attribute to determine visibility it makes sense to add style="display:block" on the element you want to appear open when the page loads.

<div class="accord-content" style="display:block;">

2) On load

If you want to keep inline styles out of your markup or just want it to animate after the page loads, you could add a jQuery block to open that accordion panel on load with something like this...

$(function(){
    $('.accord-content').first().slideDown(300);
});

I would suggest if you do this to add a containing element to the whole accordion (like .accordion) and make your selectors more explicit ( like $('.accordion .accord-content') )

Upvotes: 2

Axel A. Garc&#237;a
Axel A. Garc&#237;a

Reputation: 683

Plain CSS to the rescue (http://jsfiddle.net/KdfBj/2/):

/* Create an active class at the end of the declarations */
...
.accord-content.active {
    display: block;
}

<!-- Add that class to the desired .accord-content -->
<div class="accord-header">header1</div>
<div class="accord-content active">
    <div>test1</div>
    <div>test2</div>
</div>

Upvotes: 3

Dan-Nolan
Dan-Nolan

Reputation: 6657

How about:

$('.accord-header').first().next('div').show()

Updated Fiddle

Upvotes: 3

Related Questions