Breadcrumbs

Home / Support Center / Tutorials, Guides & FAQs

Top Menu

Content

How to put more than one tabs or accordion to article

Dj-Tabs-tutorial

You can make DJ-Tabs display tabs or accordion in your content using modules.

This way you can put accordion or tabs in the desired place in your article.

First things first

You need to create the tabs itself.

If you are not familiar how to do it, read the DJ-Tabs documentation to learn more about Groups, Items, and configuration.

OK, let's start

You need to create some modules you want to use in content.

Below you will find short tutorial explaining how I did it. The effect can be seen on

The effect can be seen on DJ-Tabs demo

Create the modules

I have created 3 DJ-Tabs modules (you can create any module by going to Extensions -> Modules -> New -> DJ-Tabs):
Three-Joomla-ModulesLayouts I have used:

  • tabs
  • accordion
  • accordion

Important settings for the modules:

Dj-Tabs-settings-module-accordion

  1. give the module a title
  2. choose a group
  3. pick a theme
  4. choose a layout (tabs or accordion)
  5. select or create new module position. In this case, I have created new module position that will be used exclusively in the article. This way I know the module assigned to this position will appear only where the module position is called in the article.
  6. remember to publish the module

Now Save.

Repeat it as many times as many Tabs you want to have in your article. In this example I have created three modules and assigned them to different module positions:

  • tabss1
  • tabss2
  • tabss3

For the first one I have set the Layout to Tabs and for other two I have set it to Accordion.

Call out module positions in article

Below you can see a screenshot of how I called the three modules in the article:

display-modules-in-articles-joomla

you can display any module position in the article by using this syntax:

loadposition-dj-tabs

where "tabss1" is the module position you have created in the previous step when creating DJ-Tabs modules.

When all the loadposition-dj-tabs2 codes are in place in Joomla article, you can save the article.

The effect

See the effect on DJ-Tabs Demo Page

If you have any questions regarding this tutorial or something is unclear, let us know in the comments below.


Found this article interesting? Subscribe for more.
Or share this article with your friends.
 

Footer Menu