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
28 January 2021
CNN.com delivers up-to-the-minute news and information on the latest top stories, weather, entertainment, politics and more.-
In the Republican Party, the post-Trump era lasted a week
Two roads diverged in American politics, and the Republican Party chose the one traveled by...
-
CNN anchor: This is the kind of thinking the GOP is embracing
CNN's Erin Burnett wonders how House Republicans could remain silent over Rep. Marjorie Taylor...
- 'Cut that crap out': Top Republican tells GOP to stop attacking each other over Trump
-
Could post-vaccine life mean we return to normal? Not just yet
Mass Covid-19 vaccination programs are underway in many countries around the world, offering the...
-
Dr. Fauci: Getting vaccine doesn't mean you have free pass to travel
During a CNN Global Town Hall Hosted by Anderson Cooper and Dr. Sanjay Gupta, Dr. Anthony Fauci...
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
28 January 2021
CNN.com delivers up-to-the-minute news and information on the latest top stories, weather, entertainment, politics and more.-
In the Republican Party, the post-Trump era lasted a week
Two roads diverged in American politics, and the Republican Party chose the one traveled by...
-
CNN anchor: This is the kind of thinking the GOP is embracing
CNN's Erin Burnett wonders how House Republicans could remain silent over Rep. Marjorie Taylor...
- 'Cut that crap out': Top Republican tells GOP to stop attacking each other over Trump
-
Could post-vaccine life mean we return to normal? Not just yet
Mass Covid-19 vaccination programs are underway in many countries around the world, offering the...
-
Dr. Fauci: Getting vaccine doesn't mean you have free pass to travel
During a CNN Global Town Hall Hosted by Anderson Cooper and Dr. Sanjay Gupta, Dr. Anthony Fauci...
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