Accessible semantic jQuery tabs plugin

Posted by user249950 on Stack Overflow See other posts from Stack Overflow or by user249950
Published on 2010-01-15T10:26:01Z Indexed on 2010/03/26 11:03 UTC
Read the original article Hit count: 522

Filed under:
|
|

Hello,

Just a quick question to see if anyone knows of any jquery tabs plugins that run based on a similar structure to:

<div class="tabs">
    <div>
        <h4>Tab one</h4>
        <p>Lorem Ipsum</p>
    </div>

    <div>
        <h4>Tab two</h4>
        <p>Lorem Ipsum</p>
    </div>
</div>

Where the plugin grabs the title of the tabs from the h4s? I can only seem to find plugins that use the structure:

<div id="tabs">
   <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li><a href="#tabs-2">Proin dolor</a></li>
      <li><a href="#tabs-3">Aenean lacinia</a></li>
   </ul>
   <div id="tabs-1">
      <p>Tab 1 content</p>
   </div>
   <div id="tabs-2">
      <p>Tab 2 content</p>
   </div>
   <div id="tabs-3">
      <p>Tab 3 content</p>
   </div>
</div>

I assume the only other way to use these plugins would be to grab the titles, remove them, add them into a list at the top of the html and then run the plugin based on that? I just ask as I am quite new to jQuery so I'm not sure how I would go about it and just wondered if there was a plugin already in existence that anyone knew of.

If not, not to worry, I'll have to get busy with the docs and give it a go!

Cheers

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about jquery-ui