Tabion jQuery – Modern Responsive Tab Accordion Switcher

Tabion jQuery – Modern Responsive Tab Accordion is a small jQuery plugin that is used to create modern Tab with powerful features. Supports Responsive Design, Swipe to change Tab Content, Left and Right keys to change Tab Content, Combine AJAX and Inline Content, CSS3 Animation Effects, Integrated Font Awesome, AutoPlay/Pause/Resume and a lot of CSS option to customize…

Buy Now

Demo List:

Tabion jQuery Features:

Responsive Design.
Support both Horizontal and Vertical Tab.
Support Click, Swipe and Keypress to change content.
Support Multi Tabs in the same page.
AutoPlay/Pause/Resume with Delay Time for each Content.
Combine Ajax and Inline Content.
CSS3 Animation Effects.
Support Icon Images and Icon Fonts.

Change Logs:

Jun 2021: Update version 1.2:

Support jQuery ver 3.6

Feb 2016: Update version 1.1:

Added a new Javascript param to show/hide tab content at default load.

Aug 2013: First Version.

Credits:

<!-- Font Awesome -->
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />

<!-- CSS3 Animation -->
<link rel="stylesheet" href="css/animate-custom.css" type="text/css" />

<!-- Tabion CSS Pack -->
<link rel="stylesheet" href="css/tabion.css" type="text/css" />

<meta name="viewport" content="width=device-width, user-scalable=no" />

<!-- IE 8 -->
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/tabion-ie8.css" type="text/css" />
<![endif]-->

Includes Javascript files:

<!-- Start jQuery Library -->
<script type="text/javascript" src="js/jquery/jquery.min.3.6.js"></script>
<!-- End jQuery Library -->

<!-- jQuery Mobile -->
<script type="text/javascript" src="js/jquery/jquery.mobile.touch.1.5.js"></script>

<!-- Tabion jQuery Plugin -->
<script type="text/javascript" src="js/tabion.min.js"></script>

Done. Tabion jQuery plugin is now ready to use.

Section 2: Call Tabion jQuery Plugin.

<!-- Call Tabion jQuery Plugin -->
<script type="text/javascript">
$(window).on('load', function() {
  $('#tabionjs').tabion({
    autoPlay:false,
    enableSwipe:true,
    enableKeys:true
  });
})
</script>

In the code above, Tabion jQuery is disabled AutoPlay feature and enabled Swipe and Left-Right keys to change Tab Content.

Section 3: Tabion jQuery HTML Structure.

This section should be read along with the example files also contained in the download package.

Simple Structure of Tabion jQuery:

<div class="tabion">

  <!-- Start Responsive Button -->
  <div class="responsive-tab">
    <span class="resbutton">
      <i class="icon-reorder"></i>
    </span>	
  </div>
  <!-- End Responsive Button -->

  <!-- Start Tab Button Holder -->
  <div class="button-holder [buttonholder-style-classes]">

    <!-- Start a Sample Tab Button with Icon Image -->
    <div data-tabid="TAB-ID" class="tabbt [button-style-classes]">
      <span class="button-icon"><img src="image-link" alt="image-title" /></span>
      <span class="button-title">Tab Title</span>
    </div>
    <!-- End a Sample Tab Button with Icon Image -->

	<!-- Start a Sample Tab Button with Icon Font -->
    <div data-tabid="TAB-ID" class="tabbt [button-style-classes]">
      <span class="button-icon"><i class="icon-home"></i></span></span>
      <span class="button-title">Tab Title</span>
    </div>
    <!-- End a Sample Tab Button with Icon Font -->

  </div>
  <!-- End Tab Button Holder -->

  <!-- Start Tab Content Holder -->
  <div class="content-holder [contentholder-style-classes]">

    <!-- Start a Sample Tab Content -->
	<div data-tabid="TAB-ID" data-animIn="ANIMATION-NAME" class="tabcontent">
	  // Add Content Here
	</div>
	<!-- End a Sample Tab Content -->

  </div>
  <!-- End Tab Content Holder -->

</div>

When a tab button is clicked, the plugin will check the same TAB-ID in the content holder.

If the plugin see a content block that has the TAB-ID in the content holder block it will show that content.

If the plugin does not see any content block has the same TAB-ID with the tab button, it will load a file has filename that is same as TAB-ID (e.g: TAB-ID.php or TAB-ID.html).

To make a default tab that will be displayed at the first load you just add a “tab-active” class into a tab button.

If you like to show a control bar with Next, Prev and Play/Pause buttons you can add the below code into the tab zone:

<!-- Start Tab Control -->
<div class="tab-control">

  <!-- Start Prev Tab -->
  <span class="tabctrl-prev light-text solid-darkblue hovershadow-blue">
    <i class="icon-backward"></i>
  </span>
  <!-- End Prev Tab -->

  <!-- Start Auto Play -->
  <span class="tabctrl-play light-text solid-darkblue hovershadow-blue">
    <i class="icon-play"></i>
    <i class="icon-pause"></i>
  </span>
  <!-- End Auto Play -->

  <!-- Start Next Tab -->
  <span class="tabctrl-next light-text solid-darkblue hovershadow-blue">
    <i class="icon-forward"></i>
  </span>
  <!-- End Next Tab -->

</div>
<!-- End Tab Control -->

Section 4: Parameters.

Javascript Parameters:

Parameters	Properties	Description
delay	integer	This param is used to set default delay time for all tab content.
autoPlay	boolean	This param is used to enable or disable Auto Play feature. Value: true \| false
enableSwipe	boolean	This param is used to enable or disable Swipe feature to move next/prev tab content. Value: true \| false
enableKeys	boolean	This param is used to enable or disable Left and Right key to move next/prev tab content. Value: true \| false.
activetab	boolean	This param is used to show/hide tab content at default load. Value: true \| false

HTML Parameters:

Parameters	Positions	Description
data-tabid	tabbt tabcontent	This param is used to set ID for tab button and tab content.
data-ext	tabbt	This param is used to set filename extension for ajax content.
data-live	tabbt	This param is used to set delay time for tab content (miliseconds).
data-animIn	tabcontent	This param is used to set CSS3 animation effects for tab content. Check Animation List below.

CSS3 Animation Classes:

[endedwords product=”Tabion jQuery”]http://talk.sonhlab.com/room/tabion-jquery-plugin[/endedwords]