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
  • Write some text below that.
  • Continue with the next tab using the same format:

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:
  • Check out the example to see how this appears on your page:

    This is some text above the tabs
    
    
    
    

    first tab title here

    some text here

    second tab title here

    some more text here

    third tab title here

    some more text here and so on..
    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
    • Write some text below that.
    • Close the slider by adding the plugin tag
  • Continue with the next slider using the same format: 
  • Write the second tab's text.
  • Close the slider by adding the plugin tag 
  • Keep repeating the above process.
  • Check out the example to see how this appears on your page:

    This is some text above the tabs
    
    
    
    
    
    
    some text here
    some more text here
    some more text here and so on...

    Here's an example of the content inside sliders: