The extension enables to load specified modules, categories, contents and even your own defined text. All of them are rendered flexibly in tabs with fading effect, or displayed in horizontal or vertical block. The animation is active upon mouseover or cursor click, depending your configuration.
Live Demo
1. Tabs Types
1.1 Module Position
{jatabs type="modules" module="position-jatabs" position="top" mouseType="click" animType="animFade"} {/jatabs}
Sample Module 1
Sample Module 2
Sample Module
CNN Top Stories
Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque bibendum ante, ac aliquam nisi placerat a.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur id luctus
Lorem ipsum dolor sit amet, consectetur adipiscing elit

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque bibendum ante, ac aliquam nisi placerat a.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur id luctus
02 July 2022
CNN.com delivers up-to-the-minute news and information on the latest top stories, weather, entertainment, politics and more.
- Deep in the eastern Ukrainian forest, this group of volunteers waits as Russia's military creeps closer
-
Symbol of Ukrainian resistance at center of new dispute
Snake Island, a symbol of Ukrainian resistance, is back in the headlines as both Ukraine and...
-
Palestinians to let US examine bullet that killed Al Jazeera journalist Shireen Abu Akleh
The Palestinian Authority will allow US investigators to examine the bullet that killed...
-
How Russia is feeding another dictatorship thousands of miles away
I am thinking of a man who sang of freedom. His name is Zeyar Thaw.
-
QAnon returns and targets Cassidy Hutchinson in new post
In a new post, online conspiracy theorist QAnon targets former White House aide Cassidy...
1.2 Module Name
{jatabs type="modules" module="position-jatabs" position="top" mouseType="click" animType="animFade"} {/jatabs}
Sample Module 1
Sample Module 2
Sample Module
CNN Top Stories
Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque bibendum ante, ac aliquam nisi placerat a.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur id luctus
Lorem ipsum dolor sit amet, consectetur adipiscing elit

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque bibendum ante, ac aliquam nisi placerat a.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur id luctus
02 July 2022
CNN.com delivers up-to-the-minute news and information on the latest top stories, weather, entertainment, politics and more.
- Deep in the eastern Ukrainian forest, this group of volunteers waits as Russia's military creeps closer
-
Symbol of Ukrainian resistance at center of new dispute
Snake Island, a symbol of Ukrainian resistance, is back in the headlines as both Ukraine and...
-
Palestinians to let US examine bullet that killed Al Jazeera journalist Shireen Abu Akleh
The Palestinian Authority will allow US investigators to examine the bullet that killed...
-
How Russia is feeding another dictatorship thousands of miles away
I am thinking of a man who sang of freedom. His name is Zeyar Thaw.
-
QAnon returns and targets Cassidy Hutchinson in new post
In a new post, online conspiracy theorist QAnon targets former White House aide Cassidy...
1.3 Articles
{jatabs type="articles" ids="25, 26, 27" ajax=true view="introtext" position="top" animType="animMoveVir"} {/jatabs}
JA Purity Template Series
JA T3v2 Framework
T3 Framework
1.4 Category
{jatabs type="articles" catid="100" view="introtext" ajax=true position="top" animType="animMoveHor"} {/jatabs}
Article in JA Tabs 3
Article in JA Tabs 2
Article In JA Tabs 1
2. Tabs Positions
2.1 Top
{jatabs type="content" position="top" mouseType="click" animType="animMoveHor"} [tab title="JA Tab 1"]<img src="/images/joomlart/random-image/4.jpg" alt="Sample image" align="left" width="200" class="caption" />Your text ...[/tab] [tab title="JA Tab 2"]<img src="/images/joomlart/random-image/2.jpg" alt="Sample image" align="left" width="200" class="caption" />Your text ...[/tab] {/jatabs}
JA Tab 1
JA Tab 2
JA Tab 3
JA Tab 4
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque bibendum ante, ac aliquam nisi placerat a.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur id luctus massa.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque bibendum ante, ac aliquam nisi placerat a.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur id luctus massa.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque bibendum ante, ac aliquam nisi placerat a.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur id luctus massa.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque bibendum ante, ac aliquam nisi placerat a.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur id luctus massa.
2.2 Right
{jatabs type="content" position="right" widthTabs=200 mouseType="click" animType="animMoveHor"} [tab title="JA Tab 1"]<img src="/images/joomlart/random-image/4.jpg" alt="Sample image" align="left" width="200" class="caption" />Your text ...[/tab] [tab title="JA Tab 2"]<img src="/images/joomlart/random-image/2.jpg" alt="Sample image" align="left" width="200" class="caption" />Your text ...[/tab] {/jatabs}
JA Tab 1
JA Tab 2
JA Tab 3
JA Tab 4

Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque bibendum ante, ac aliquam nisi placerat a.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur id luctus massa.

Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque bibendum ante, ac aliquam nisi placerat a.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur id luctus massa.

Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque bibendum ante, ac aliquam nisi placerat a.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur id luctus massa.

Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque bibendum ante, ac aliquam nisi placerat a.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur id luctus massa.
2.3 Bottom
{jatabs type="content" position="bottom" mouseType="click" animType="animMoveHor"} [tab title="JA Tab 1"]<img src="/images/joomlart/random-image/4.jpg" alt="Sample image" align="left" width="200" class="caption" />Your text ...[/tab] [tab title="JA Tab 2"]<img src="/images/joomlart/random-image/2.jpg" alt="Sample image" align="left" width="200" class="caption" />Your text ...[/tab] {/jatabs}

Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque bibendum ante, ac aliquam nisi placerat a.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur id luctus massa.

Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque bibendum ante, ac aliquam nisi placerat a.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur id luctus massa.

Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque bibendum ante, ac aliquam nisi placerat a.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur id luctus massa.

Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque bibendum ante, ac aliquam nisi placerat a.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur id luctus massa.
JA Tab 1
JA Tab 2
JA Tab 3
JA Tab 4
2.4 Left
{jatabs type="content" position="left" widthTabs=200 mouseType="click" animType="animMoveHor"} [tab title="JA Tab 1"]<img src="/images/joomlart/random-image/4.jpg" alt="Sample image" align="left" width="200" class="caption" />Your text ...[/tab] [tab title="JA Tab 2"]<img src="/images/joomlart/random-image/2.jpg" alt="Sample image" align="left" width="200" class="caption" />Your text ...[/tab] {/jatabs}
JA Tab 1
JA Tab 2
JA Tab 3
JA Tab 4

Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque bibendum ante, ac aliquam nisi placerat a.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur id luctus massa.

Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque bibendum ante, ac aliquam nisi placerat a.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur id luctus massa.

Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque bibendum ante, ac aliquam nisi placerat a.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur id luctus massa.

Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque bibendum ante, ac aliquam nisi placerat a.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur id luctus massa.
Back-end Settings Screenshots
-
Enable The Plugin Enable The Plugin
-
Basic Settings Basic Settings
-
Animation Settings Animation Settings
https://joomla-extensions.demo.joomlart.com/index.php/ja-tabs#sigProGalleriabcc604bf98