CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Coderbit
Coderbit

Reputation: 801

jQuery UI Accordion ALL tabs active on page load

I have nested accordions made with jQuery UI.

<div id="accordion">
    <h3>Location 1 (main, NEW YORK, NY 10292)</h3>
        <div id="accordion-2">
            <h3>Class Code Information</h3>
            <div>
            <span class="block-1">
            <span class="block-2">
            <span class="block-3">
...

By default making active:true I'm getting 1st main and 1st (block-1) child opened. How can I make all children of 1st main accordion active(opened): block-1 block-2 block-3 ...

this is my JS

$(function() {
var icons = {
        header: "iconClosed", // custom icon class
        activeHeader: "iconOpen" // custom icon class
    };
    $("#accordion, #accordion-2").accordion({
        autoHeight: false,
        collapsible: true,
        heightStyle: "content",
        icons: icons
    });
});

Anyone know how to achieve this?

Upvotes: 0

Views: 1052

Answers (1)

Coderbit
Coderbit

Reputation: 801

Ок, at the moment jquery UI has NO way to make all accodrion's blocks active(visible) at one time.

So, if you need to have more then one panels opened: look for another plugin, OR: make each slide, you want to appear opened, as a new accotdion.

for exmaple I made a div #accordion-2 - where on each child div I've activated accordion.

$("#accordion-2 > div").accordion({
    header: "h3",
    autoHeight: false,
    collapsible: true,
    icons: icons
});

Upvotes: 1

Related Questions