Joomla is one of the world’s most popular and widely deployed content management systems… and for good reason. Its open source distribution model and large developer community ensure that new and innovative features and add-ons keep coming. With so many useful plugins available, we thought we’d start a new series detailing some of our favorite.

But first, a little background… Web designers are always looking for new and better methods to present content in more efficient and user-friendly ways, and two of the best practices borrowed from desktop applications are “tabs” and “slides.” Tabs allow for multiple content items to be displayed in the same document window, while slides allow portions of the page to expand/collapse on demand. Both provide the designer with a method of allowing the user to quickly get to additional (i.e. supplemental) information without requiring a page load. This idea is pretty common in sites where there is an initial product description above a series of tabs for technical data, comparison charts, related items, etc.; clicking one of the tabs changes the content below the tab set while keeping the product description above. With the advent of freely available JavaScript frameworks like jQuery and MooTools, the bad old days of programatically cumbersome and SEO-belligerent tabs and slides are gone, replaced with elegant DOM- and CSS-based solutions.

A stock Joomla 1.5 install has no built-in facility to display page content in tabs or slides, and so developers must either cobble something together from scratch or use a third party plugin. And that’s what takes us to our first plugin of the series… Joomla Tabs and Slides (in content items). Like most plugins, Joomla Tabs and Slides provides a non-invasive method of adding its functionality without the developer having to add any code to his or her templates or touch the core Joomla code at all. As with most well-written plugins, simply install the Joomla Tabs and Slides ZIP archive in the Joomla Control Panel (Extensions > Install/Uninstall) and then make sure it’s activated in the Plugin Manager (Extensions > Plugin Manager). At this point, you need only add some simple inline tags to your articles, so let’s talk about those.

When Joomla renders your site’s content, it passes through the filters of a number of plugins, each getting the opportunity to do something to the content. Joomla Tabs and Slides simply takes its turn at your content, looks for its special “tab” tags (see example above), and outputs the CSS and JavaScript necessary to turn them into tabs. To begin a tab set, simply add a new paragraph in the Joomla article editor and type “{tab=xxxx}” replacing xxxx with the name of your tab (don’t type the quotes; spaces and special characters are allowed). As you can see, the tab tags begin and end with braces. Then type the content of your tab. It can be just about any properly formatted content (tables, paragraphs, images, etc.). When you’re ready to close your tab and begin the next one (assuming there is more than one), simply create a new paragraph and type “{tab=xxxx}” again, replacing xxxx with the name of your next tab (no quotes). Continue this until you have finished the content of your final tab. Then, create a new paragraph and type ”{/tabs}” (no quotes). This tells the plugin to close up the tab set. In the example above you can see how this looks in the WYSIWYG and source editors, as well as final page render. Note: In the source editor, it’s possible to use wrapper tags other than paragraphs (e.g. h1, h2, h3) but paragraphs seem to be the easiest for content authors to manage.

Hopefully this paints a clear picture of what the plugin can do and how to do it. You can see it in action at one of our sites and also at the Joomla Tabs and Slides plugin page itself. Enjoy!