JA Tabs

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.

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

29 January 2023

CNN.com delivers up-to-the-minute news and information on the latest top stories, weather, entertainment, politics and more.

• Russian teen faces years in jail over social media post criticizing Ukrainian war
  Olesya Krivtsova sports an anti-Putin tattoo on one ankle and a bracelet that tracks her every...
• What we know so far about the number of tanks pledged to Ukraine from each country
• Protesters across the US decry police brutality after Tyre Nichols' death
  Protesters once again took to the streets to decry police brutality over the weekend after the...
• Why police reform utterly failed to protect Tyre Nichols
  The conduct of the Memphis police officers who were charged with fatally beating Tyre Nichols is...
• These are the moments that led to Tyre Nichols' death
  Video of Tyre Nichols' deadly arrest was released by the Memphis Police Department. These are the...

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

29 January 2023

CNN.com delivers up-to-the-minute news and information on the latest top stories, weather, entertainment, politics and more.

• Russian teen faces years in jail over social media post criticizing Ukrainian war
  Olesya Krivtsova sports an anti-Putin tattoo on one ankle and a bracelet that tracks her every...
• What we know so far about the number of tanks pledged to Ukraine from each country
• Protesters across the US decry police brutality after Tyre Nichols' death
  Protesters once again took to the streets to decry police brutality over the weekend after the...
• Why police reform utterly failed to protect Tyre Nichols
  The conduct of the Memphis police officers who were charged with fatally beating Tyre Nichols is...
• These are the moments that led to Tyre Nichols' death
  Video of Tyre Nichols' deadly arrest was released by the Memphis Police Department. These are the...

1.3 Articles

{jatabs type="articles" ids="25, 26, 27" ajax=true view="introtext" position="top" animType="animMoveVir"} {/jatabs}

1.4 Category

{jatabs type="articles" catid="100" view="introtext" ajax=true position="top" animType="animMoveHor"} {/jatabs}

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}

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.

• Enable The Plugin Enable The Plugin
• Basic Settings Basic Settings
• Animation Settings Animation Settings
•