CODEWITHSUNDEEP
jqueryhtmljquery-uijquery-ui-accordion
Rowinson Gallego
Rowinson Gallego

Reputation: 856

HTML5 markup for jQuery UI accordion

I have the following markup and I want to use the jQuery UI accordion, but it is not rendered like the typical accordion I have made before HTML5. How could I get the accordion by using article/section?

<article>
    <h1>Accordion</h1>
    <div id="accordion">
        <section>
            <h1><a href="#">Aliquam tincidunt mauris eu risus.</a></h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna.</p>
        </section>
        <section>
            <h1><a href="#">Integer vitae libero ac risus egestas placerat.</a></h1>
            <p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus.</p>
        </section>
        <section>
            <h1><a href="#">Fusce lobortis lorem at ipsum semper sagittis.</a></h1>
            <p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus.</p>
        </section>
    </div>
</article>

In javascript I use:

$(document).ready(function (){
    $('#accordion').accordion();    
});

Upvotes: 1

Views: 1993

Answers (2)

Ian Devlin
Ian Devlin

Reputation: 18870

As a side note, you'd be better off using the details and summary elements.

Upvotes: 2

Piyas De
Piyas De

Reputation: 1764

We have tested the following code in JSFiddle...

<div id="accordion">
   <article class="std_page_content">
    <a id="#test" href="#test" class="header"><h1>Aliquam tincidunt mauris eu risus</h1></a>
    <section>
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna.</p>
        </section>
    <a href="#test" class="header"><h1>Integer vitae libero ac risus egestas placerat.</h1></a>
       <section>
            <p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus.</p>
        </section>
       <a href="#test" class="header"><h1>Fusce lobortis lorem at ipsum semper sagittis.</h1></a>
        <section>
            <p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus.</p>
        </section>
   </article>
</div>

and the accordion code as -

$("#accordion").accordion({header : "a.header", heightStyle : "content", 
   /*Allows full collapse*/collapsible: true, 
   /*collapses sections*/ active:false, 
   navigation:true
});

Our link is - http://jsfiddle.net/3tGYB/2/

You can try this one...

Upvotes: 3

Related Questions