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

31 May 2020

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

• 25 US cities under curfew as clashes continue
• Protests rage for a fifth night across America
  Protests erupted in at least 30 US cities over the death of George Floyd in Minneapolis,...
• In a sad week for America, Trump has fled from his duty
  This past week has brought tragedy upon tragedy to our nation: the death toll from Covid-19 passed...
• New surveillance video shows moments before George Floyd was pinned to ground
  Surveillance video shows police load George Floyd into the back of a police car in Minneapolis....
• CNN's Brian Stelter: Where are the leaders? This is a national crisis.
  CNN's Brian Stelter says the widespread outbreak of disturbances that have followed the killing of...

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

31 May 2020

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

• 25 US cities under curfew as clashes continue
• Protests rage for a fifth night across America
  Protests erupted in at least 30 US cities over the death of George Floyd in Minneapolis,...
• In a sad week for America, Trump has fled from his duty
  This past week has brought tragedy upon tragedy to our nation: the death toll from Covid-19 passed...
• New surveillance video shows moments before George Floyd was pinned to ground
  Surveillance video shows police load George Floyd into the back of a police car in Minneapolis....
• CNN's Brian Stelter: Where are the leaders? This is a national crisis.
  CNN's Brian Stelter says the widespread outbreak of disturbances that have followed the killing of...

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
•