javascript - Jquery Accordion, Set Active by ID - Stack Overflow

admin管理员组

文章数量:1389866

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>

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>

• javascript
• jquery
• html

Share Improve this question Follow edited Oct 31, 2012 at 18:48 Renato Gama 16.6k1212 gold badges6060 silver badges9898 bronze badges asked Oct 31, 2012 at 18:42 Chris James ChampeauChris James Champeau 99433 gold badges1616 silver badges3737 bronze badges 1

• How will you determine which <h3> id to take (assuming <h3> are the accordion folds)? This isn't hard, but we don't have quite enough information. – Michael Berkowski Commented Oct 31, 2012 at 18:51

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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.

For anyone else who came across this older topic, jQuery Accordion now uses a number based value for the "active" option > https://api.jqueryui./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>

本文标签： javascriptJquery accordionSet Active by IDStack Overflow