clean tabbed content - Free Download Professional Clean Tabbed Content In jQuery

Free Download Professional Clean Tabbed Content In jQuery

By Posted on

This time I will share jQuery Plugin and tutorial about Professional Clean Tabbed Content In jQuery, hope it will help you in programming stack.

clean tabbed content - Free Download Professional Clean Tabbed Content In jQuery
File Size: 5.91 KB
Views Total: 347
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

A professional, clean, responsive tabbing system to switch between tabbed content by clicking/tapping on tabs. Written in jQuery and CSS/CSS3.

How to use it:

1. Add tabs and tabbed content to the tabbing system.

  • .is-current: Set active tab on page load
  • data-tab-list: Unique ID.
  • data-tab-info: Tab info
view source
01 <div class="tab">
02  
03   <!-- Tabs -->
04   <div class="tab__button">
05     <ul class="list">
06       <li class="js-tab-trigger item is-current" data-tab-list="tabGroup1" data-tab-info="tab01">
07         <button class="button" type="button">Tab 1</button>
08       </li>
09       <li class="js-tab-trigger item" data-tab-list="tabGroup1" data-tab-info="tab02">
10         <button class="button" type="button">Tab 2</button>
11       </li>
12       <li class="js-tab-trigger item" data-tab-list="tabGroup1" data-tab-info="tab03">
13         <button class="button" type="button">Tab 3</button>
14       </li>
15     </ul>
16   </div>
17  
18   <!-- Tab Content -->
19   <div class="tab__content">
20     <div class="js-tab-content content is-current" data-tab-list="tabGroup1" data-tab-info="tab01">
21       <h2 class="title">Tab 1</h2>
22       <div class="box">
23         <div class="imageWrap"><img class="image" src="1.jpg" alt="image alt"></div>
24         <p class="text">Tab 1 Content</p>
25       </div>
26     </div>
27     <div class="js-tab-content content" style="display: none;" data-tab-list="tabGroup1" data-tab-info="tab02">
28       <<h2 class="title">Tab 2</h2>
29       <div class="box">
30         <div class="imageWrap"><img class="image" src="2.jpg" alt="image alt"></div>
31         <p class="text">Tab 2 Content</p>
32       </div>
33     </div>
34     <div class="js-tab-content content" style="display: none;" data-tab-list="tabGroup1" data-tab-info="tab03">
35       <h2 class="title">Tab 3</h2>
36       <div class="box">
37         <div class="imageWrap"><img class="image" src="3.jpg" alt="image alt"></div>
38         <p class="text">Tab 3 Content</p>
39       </div>
40     </div>
41   </div>
42    
43 </div>

2. The necessary CSS styles for the tabbing system.

view source
01 /* Tab Button */
02 .tab__button {
03   height: 50px;
04 }
05 .list {
06   display: flex;
07   list-style: none;
08   height: 100%;
09 }
10 .item {
11   width: 100%;
12   border: 0;
13   border-left: 1px solid #ddd;
14   height: 100%;
15 }
16 .button {
17   cursor: pointer;
18   appearance: none;
19   border-radius: 0;
20   border-style: none;
21   width: 100%;
22   height: 100%;
23   border-bottom: 2px solid transparent;
24   transition: all .25s ease-in-out;
25 }
26 .button:hover {
27   font-weight: bold;
28   border-bottom: 2px solid #31a0ca;
29 }
30 .button:focus {
31   outline: none;
32 }
33 .is-current .button {
34   color: #fff;
35   background:

Related posts: