How to Create Tabs or Sliders in Joomla Articles

| Joomla
How to Create Tabs or Sliders in Joomla

Sometimes there's too much content on a page and you need a cleaner way to organize it all.

This tutorial will show you how to group your Joomla content together into tabs or sliders.

The Tabs & Sliders extension will make this easy to accomplish. Tabs & Sliders is a great choice, having been downloaded over 1 million times. It has over 100 reviews on the Joomla Extensions Directory and has a rating of almost 100%.

Install the Tabs and Sliders extension

How to Create Tabs

  • Create a new article or edit an existing one.
  • Start your first tab using the plugin tag {tab=tab title here}
  • Write some text below that.
  • Continue with the next tab using the same format: {tab=other tab title here}
  • Write the second tab's text.
  • Keep repeating the above process.
  • When you finish the text of your last tab, add this: {/tabs}

Check out the example to see how this appears on your page:

This is some text above the tabs
{tab=first tab title here}
some text here
{tab=second tab title here}
some more text here
{tab=third tab title here}
some more text here and so on..
{/tabs}
And some more text after the tabs!

Here's an example of the content in your article:

How to Create Tabs or Sliders in Joomla Articles

And here's how your content will appear inside tabs:

How to Create Sliders

Sliders are also called accordions. Creating sliders is the similar as tabs, except you use the "slider" tag instead and close each slide. Here's how:

  • Create a new article or edit an existing one.
  • Start your first slider using the plugin tag {slider=slide title here}
  • Write some text below that.
  • Close the slider by adding the plugin tag {/slider}
  • Continue with the next slider using the same format: {slider=other tab title here}
  • Write the second tab's text.
  • Close the slider by adding the plugin tag {/slider}
  • Keep repeating the above process.

Check out the example to see how this appears on your page:

This is some text above the tabs
{slider=My first slider in Joomla}
some text here
{/slider}
{slider=Joomla is the best}
some more text here
{/slider}
{slider=Third one}
some more text here and so on...
{/slider}

Here's an example of the content inside sliders:


About the author

Nick is the Director of Support at OSTraining and you can find him in almost every area of the site, from answering support requests and account questions to creating tutorials and software.