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:
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:
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.