CODEWITHSUNDEEP
jqueryhtmlaccordionzurb-foundation
powpow12
powpow12

Reputation: 637

Foundation accordion all active or expanded on page load

I am having issues implementing the foundation accordion. The issue seems to be when the page loads all content is active or expanded. However, when the page loads only one accordion content should be active which you denote with 

<li class="active">

Oddly enough, after the page loads and you click an accordion title the JS responds and makes only the active div display and all other divs disappear.

I used this topic thread here to implement accordion to my site : https://groups.google.com/forum/?fromgroups=#!topic/foundation-framework-/alYolSjS8w8.

Here is a link to the broken accordion: http://rppdesigns.com/dev/pennProp_dev/index.php/home/contact.

Upvotes: 2

Views: 3130

Answers (3)

cat5dev
cat5dev

Reputation: 1335

Using Foundation 5.x, this is the only way I was able to get it to work:

$(document).foundation({
    accordion: {
        // allow multiple accordion panels to be active at the same time
        multi_expand: true
    }
});

$(document).ready(function () {
    // Expand unopened sections
    $('a[aria-expanded="false"]').click();
});

Upvotes: 0

Michael O&#39;Brien
Michael O&#39;Brien

Reputation: 60

Make a class called whatever ie .disguise

.disguise{display:none;}

apply that to whatever non-actives

add in the active a !important display: inline;

you just trumped the bug...

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191729

Just add this to your code after the accordion is loaded:

$(".active").trigger('click');

Upvotes: 1

Related Questions