CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3364730
user3364730

Reputation: 243

Get javascript accordion to work with 1 ID

I'm using a nice accordion script from TYMPANUS for my website though the difference is that I am using it multiple times on 1 page like:

<div id="st-accordion" class="st-accordion">
    <ul>
        <li>
            <a href="#">Flowers <span class="st-arrow">View <b>Details</b></span></a>
            <div class="st-content">

            <p>She packed her seven versalia, put her initial into the belt and made  
herself on the way. When she reached the first hills of the Italic Mountains, she had 
a last view back on the skyline of her hometown Bookmarksgrove, the headline of 
Alphabet Village and the subline of her own road, the Line Lane.</p>

            </div>
        </li>
    </ul>
</div>



<div id="st-accordion" class="st-accordion">
    <ul>
        <li>
            <a href="#">Flowers <span class="st-arrow">View <b>Details</b></span></a>
            <div class="st-content">

            <p>She packed her seven versalia, put her initial into the belt and made 
herself on the way. When she reached the first hills of the Italic Mountains, she had 
a last view back on the skyline of her hometown Bookmarksgrove, the headline of 
Alphabet Village and the subline of her own road, the Line Lane.</p>

            </div>
        </li>
    </ul>
</div>

Please see this FIDDLE 01

As you can see I have 2 separate elements (I need it to be separate) using that accordion but because the ID is the same, you can clearly see that the second accordion isn't working.

Javascript for this fiddle:

$(function() {
$('#st-accordion').accordion();
});

So to get it working, I created separate ID's for each element like in this FIDDLE 02

Javascript for this fiddle:

$(function() {
$('#st-accordion-01, #st-accordion-02').accordion(); 
});

BUT I don't like having to always create an extra / different ID, so it there a way to get FIDDLE 01 working without having to resort to FIDDLE 02? ... Or is this just not possible?

*The Javascripts posted above are at the very bottom of the javascript section in jsfiddle

Upvotes: 1

Views: 250

Answers (1)

Bojan Petkovski
Bojan Petkovski

Reputation: 6933

There can not / must not be elements with the same id name in one page.

http://www.w3.org/TR/html5/elements.html#the-id-attribute

The id attribute specifies its element's unique identifier (ID). The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

So to fix your problem, just remove the same ids and just leave the class st-accordion

http://jsfiddle.net/5h559dyj/3/

$(function() {
    $('.st-accordion').accordion();
});

Upvotes: 1

Related Questions