CODEWITHSUNDEEP
javascriptjqueryhtml
Chris James Champeau
Chris James Champeau

Reputation: 994

Jquery Accordion, Set Active by ID

So I have tried everything and cannot seem to figure this out, what I have is an accordian that plugs in data dynamicly, what I need to happen is I need the id of the data to be pluged in as the id for the h3 section that then is in turn clicked and opened...

<script>
jQuery(function() {
    jQuery( "#work" ).accordion({
    collapsible: true,
    active: 1});
});
</script>

So right now the first H3 will be open, but I want to be able to set which div by the H3 id

<h3 id='$record[wid]'>
        <a id='clickable' href='#'>
            <div class='workitem'>
                <span class='mosaic-overlay'>
                    <div class='details'>
                        <a name='$record[wid]'></a>
                        <span class='title'>$record[title]
                        </span>
                    <br />
                        <span class='subtitle'>$record[subtitle]
                        </span>
                    </div>
                </span>
                <span class='mosaic-backdrop'>
                    <img src='/img/work/$record[image]' />
                </span>
            </div>
        </a>
    </h3>

Upvotes: 2

Views: 9585

Answers (2)

Ed-AITpro
Ed-AITpro

Reputation: 340

For anyone else who came across this older topic, jQuery Accordion now uses a number based value for the "active" option > https://api.jqueryui.com/accordion/#option-active > 0 = the first accordion tab > 1 = the second accordion tab etc. active: 1 will display the second accordion tab open/active. Additionally you probably want to use the autoHeight, clearStyle and heightStyle options so that you do not have additional whitespace at the bottom of the active accordion tab.

<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function($){
    $( "#accordion" ).accordion({
    collapsible: true,
    active: 1,
    autoHeight: true,
    clearStyle: true,
    heightStyle: "content"
    });
});
/* ]]> */
</script>

Upvotes: 1

akatakritos
akatakritos

Reputation: 9858

On the accordion I use in my project, I just set the active to "h3#" + the id of the accordion fold I want to open.

<script type='text/javascript'>
jQuery(function() {
    jQuery( "#work" ).accordion({
    collapsible: true,
    active: "h3#id"
    });
});
</script>

I believe its the standard jQueryUI accordion, so hopefully it will work for you too.

Upvotes: 3

Related Questions