“Tabify” – the No Markup jQuery Plugin

I needed to introduce a tabbed layout for displaying details of certain products within a web-based e-commerce product we use.

The product includes a WYSIWYG editor, which enables product details to be entered without any (or at least limited) HTML knowledge. The problem is that quite a bit of additional markup was needed to implement the tabbed layout, and that meant that our business users would have difficulty maintaining the content accurately.

To solve the problem I created a jQuery plugin for converting content into a tabbed layout without needing to manually inject additional markup for formatting. Here’s how it works:

<script type="text/javascript">
    $(function() {
        $("div.tabs").tabify();
    });
</script>

<div class="tabs">
    <h2>First Tab Heading</h2>
    <p>Content for first tab...</p>
    <p>Some more content</p>
    <h2>Second Tab Heading</h2>
    <p>Content for second tab...</p>
    <h2>Third Tab Heading</h2>
    <p>And so on...</p>
</div>

The plugin parses <h2> elements to find the tab headings. The content between each header becomes the content for each tab. You can also specify a different delimiter for the tab labels:

<script type="text/javascript">
    $(function() {
        $("div.tabs").tabify({
            labels: "h2"
        });
    });
</script>

The markup generated by this plug-in is based on an article by Soh Tanaka, who describes how to create Simple Tabs with CSS and jQuery. You can use the exact same CSS classes that Soh has used for his demo.

Download the plugin. Use without restriction.

1 thought on ““Tabify” – the No Markup jQuery Plugin”

Leave a Reply

Your email address will not be published. Required fields are marked *