Download Multi-purpose jQuery Tabs Interface Plugin – Tabs.js

This time I will share jQuery Plugin and tutorial about Multi-purpose jQuery Tabs Interface Plugin – Tabs.js, hope it will help you in programming stack.

File Size:	12.3 KB
Views Total:	1707
Last Update:	4 years ago
Publish Date:	4 years ago
Official Website:	Go to website
License:	MIT

Demo Download

Tabs.js is a lightweight jQuery plugin which helps you to present sectioned content in a horizontal/vertical or accordion-style tabbed interface.

More features:

Custom animation types.
Configurable animation speed.
Callback functions.
Supports hash change.
Cross browser.

How to use it:

1. Load the jQuery tabs.js plugin after jQuery library and we’re ready to go.

`1`	`<script` `src="//code.jquery.com/jquery.min.js"></script>`

`2`	`<script` `src="build/js/tabs.js"></script>`

2. Below is a very basic setup for the tabs. Just providing 3 simple tabs and minimal styling.

data-tab: target content
data-tab-content: content
data-tabs-default: default tab

01
<div class="basic-tabs tab-container">

02
  <a data-tab="#basic-tab1" href="#">Tab 1</a>

03
  <a data-tab="#basic-tab2" href="#">Tab 2</a>

04
  <a data-tab="#basic-tab3" href="#">Tab 3</a>

05
 
06
  <div data-tab-content data-tabs-default id="basic-tab1">

07
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem nisi consectetur, accusantium!</p>

08
  </div>

09
  <div data-tab-content id="basic-tab2">

10
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p>

11
  </div>

12
  <div data-tab-content id="basic-tab3">

13
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, delectus?</p>

14
  </div>

15
</div>

`1`	`$('.basic-tabs [data-tab]').tabs();`

3. Below is a very basic setup for the tabs. Just providing 3 simple tabs and with the tab links positioned to the side.

01
<div class="side-tabs tab-container">

02
  <div class="tab-links">

03
      <a data-tab="#side-tab1" href="#">Tab 1</a>

04
      <a data-tab="#side-tab2" href="#">Tab 2</a>

05
      <a data-tab="#side-tab3" href="#">Tab 3</a>

06
  </div>

07
 
08
  <div class="tab-content">

09
      <div data-tab-content id="side-tab1">

10
          <h2>Tab 1</h2>

11
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem nisi consectetur, accusantium!</p>

12
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p>

13
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, delectus?</p>

14
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p>

15
      </div>

16
      <div data-tab-content data-tabs-default id="side-tab2">

17
          <h2>Tab 2</h2>

18
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p>

19
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p>

20
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem nisi consectetur, accusantium!</p>

21
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p>

22
      </div>

23
      <div data-tab-content id="side-tab3">

24
          <h2>Tab 3</h2>

25
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, delectus?</p>

26
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p>

27
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem nisi consectetur, accusantium!</p>

28
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p>

29
      </div>

30
  </div>

31
</div>

`1`	`$('.side-tabs [data-tab]').tabs();`

4. Below is a simple way to turn the tabs into an accordion.

01
<div class="accordion-tabs tab-container">

02
 
03
  <a data-tab="#accordion-tab1" href="#">Tab 1</a>

04
 
05
  <div data-tab-content id="accordion-tab1">

06
      <h2>Tab 1</h2>

07
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem nisi consectetur, accusantium!</p>

08
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p>

09
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, delectus?</p>

10
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p>

11
  </div>

12
 
13
  <a data-tab="#accordion-tab2" href="#">Tab 2</a>

14
 
15
  <div Share this:Facebook
Tweet
WhatsApp
Related posts:Free Download Advanced Speech Bubble Tooltip Plugin – jQuery FlstBubble.js
Free Download Smooth Sticky Header In jQuery – sp.stickyHeader.js
Free Download Powerful Calendar Plugin With jQuery – Calendar.js