javascript

jQuery UI Sortable Tabs with Accordions

6 Comments

It’s possible to combine jQuery UI elements with each other. For example, you can create tabs that contain accordions. And then you can make those tabs sortable. Of course, your html has to fit the expected pattern.

Accordion HTML

The accordion html is generally a <div> with pairs of child elements. The first element of the pair is the header and the second is the content. I usually use heading elements like <h3> for the headers because otherwise the accordions won’t stack nicely. If you’re not sure what I’m talking about, try making an accordion using just <a> tags for the headers.

<div>
    <h3><a href='#'>Section1</a></h3>
    <div><p>section 1 content</p></div>
    <h3><a href='#'>Section2</a></h3>
    <div><p>section 2 content</p></div>
    <h3><a href='#'>Section3</a></h3>
    <div><p>section 3 content</p></div>
</div>

Tabs HTML

The tabs html is generally a <div> with a <ul> containg a <li> for each tab header, followed by one content <div> for each tab. Each tab <li> should contain an <a> whose href refers to a content <div>.

<div>
    <ul>
          <li><a href='#tab1'>Tab 1</a></li>
          <li><a href='#tab2'>Tab 2</a></li>
          <li><a href='#tab3'>Tab 3</a></li>
     </ul>
     <div id='tab1'>tab1 content</div>
     <div id='tab2'>tab2 content</div>
     <div id='tab3'>tab3 content</div>
</div>

Sortable HTML

The sortable html is generally a simple list of elements.

<ul>
    <li><a href='#'>Item 1</a></li>
    <li><a href='#'>Item 2</a></li>
    <li><a href='#'>Item 3</a></li>
</ul>

Combining with jQuery UI

As you can see, the tabs html looks very similar to the sortable html, while the accordion html is quite different. The result is that it’s a bit tricky to create sortable accordions, but fairly easy to create sortable tabs. You can also combine tabs with accordions, and below I demonstrate how to put accordions within sortable tabs. For a working demo, checkout Sortable Tabs with Accordions. As for the question of why anyone would want to do this, I’ll leave that as an exercise for the reader 🙂

<html><head>
    <link rel="stylesheet" type="text/css" href="smoothness.css"; />
    <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('#tabs').tabs();
        $('#sortable').sortable({
            items: 'li'
        });
        $('.accordion').accordion({
            autoHeight: false,
            clearStyle: true,
            header: 'h3'
        });
    });
    </script>
</head>
<body>
<div id='tabs'>
    <ul id='sortable'>
        <li><a href='#tab1'>Tab 1</a></li>
        <li><a href='#tab2'>Tab 2</a></li>
        <li><a href='#tab3'>Tab 3</a></li>
    </ul>
    <div id='tab1'>
        <div class='accordion'>
            <h3><a href='#'>Section1</a></h3>
            <div><p>section 1 content</p></div>
            <h3><a href='#'>Section2</a></h3>
            <div><p>section 2 content</p></div>
            <h3><a href='#'>Section3</a></h3>
            <div><p>section 3 content</p></div>
        </div>
    </div>
    <div id='tab2'>
        <div class='accordion'>
            <h3><a href='#'>Section4</a></h3>
            <div><p>section 4 content</p></div>
            <h3><a href='#'>Section5</a></h3>
            <div><p>section 5 content</p></div>
            <h3><a href='#'>Section6</a></h3>
            <div><p>section 6 content</p></div>
        </div>
    </div>
    <div id='tab3'>
        <div class='accordion'>
            <h3><a href='#'>Section7</a></h3>
            <div><p>section 7 content</p></div>
            <h3><a href='#'>Section8</a></h3>
            <div><p>section 8 content</p></div>
            <h3><a href='#'>Section9</a></h3>
            <div><p>section 9 content</p></div>
        </div>
    </div>
</div>
</body></html>