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

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

• Mueller's office disputes bombshell BuzzFeed report on Trump
• White House announces second Trump-Kim summit
  The White House announced Friday that a second summit will take place between President Donald...
• Former detainee reveals death, horror inside Beijing's Uyghur 're-education camps'
  The children's eyes light up when their mother pulls out a photo of her triplets taken shortly...
• The female athletes speaking out about South Korean skating's culture of abuse
  The nervous 18-year-old sits picking furiously at her nails.
• Susan Pompeo's travels during shutdown anger some diplomats, sources say
  At a time when most State Department staff weren't allowed to travel for work and some weren't...

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

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

• Mueller's office disputes bombshell BuzzFeed report on Trump
• White House announces second Trump-Kim summit
  The White House announced Friday that a second summit will take place between President Donald...
• Former detainee reveals death, horror inside Beijing's Uyghur 're-education camps'
  The children's eyes light up when their mother pulls out a photo of her triplets taken shortly...
• The female athletes speaking out about South Korean skating's culture of abuse
  The nervous 18-year-old sits picking furiously at her nails.
• Susan Pompeo's travels during shutdown anger some diplomats, sources say
  At a time when most State Department staff weren't allowed to travel for work and some weren't...

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
•