This is the simples tabs example, with tabs only with text inside. Just to demonstrate the different layouts you can achieve with DJ-Tabs.

On other demo pages, you will find examples of different content inside the tabs. You can change the themes in the top right from the select box on any page to see the built-in themes. Learn more about the themes. 🎨 . 
Look at the menu on the left to see other demo pages of DJ-Tabs.

Tabs open on click

The most common usage, where tabs open when you click a tab

loading...

Tab 1
Tab 2
Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Tab 3
Tuesday May 2021

 

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Read more

Tabs open on hover

Just hover over the tab to see its content

loading...

Tab 1
Tab 2
Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Tab 3
Tuesday May 2021

 

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Read more

Tabs to the right

Tabs are aligned to the right instead of to the left

loading...

Tab 1
Tab 2
Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Tab 3
Tuesday May 2021

 

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Read more

Tabs with 2nd item opened by default

You can control which tab will be opened by default.

loading...

Tab 1
Tab 2
Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Tab 3
Tuesday May 2021

 

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Read more

Tabs with icon/emoji/image in the tab name

Insert one of the predefined icons, emoji or image inside the tab name, you can also mix them together

loading...

Tab 1

Tab 2 with emoji 😃

Tab 3 with and image: dj-extensions Joomla extensions

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

 

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.