Sliding Tabs jQuery CSS3 Toggle Tabs - Download Stylish Sliding Tabs With jQuery And CSS3 - Toggle Tabs

Download Stylish Sliding Tabs With jQuery And CSS3 – Toggle Tabs

By Posted on

This time I will share jQuery Plugin and tutorial about Stylish Sliding Tabs With jQuery And CSS3 – Toggle Tabs, hope it will help you in programming stack.

Sliding Tabs jQuery CSS3 Toggle Tabs - Download Stylish Sliding Tabs With jQuery And CSS3 - Toggle Tabs
File Size: 2.7 KB
Views Total: 6087
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

The Toggle Tabs script allows the users to switch between tabbed content with sliding, toggle button-style navigation tabs. Powered by CSS/CSS3 and a little bit of jQuery.

How to use it:

1. Create the tabbed content and their corresponding navigation tabs as these:

view source
01 <div class="tab-slider--nav">
02   <ul class="tab-slider--tabs">
03     <li class="tab-slider--trigger active" rel="tab1">Tab 1</li>
04     <li class="tab-slider--trigger" rel="tab2">Tab 2</li>
05   </ul>
06 </div>
07 <div class="tab-slider--container">
08   <div id="tab1" class="tab-slider--body">
09     <h2>Tab 1</h2>
10     <p>Tab 1 content</p>
11   </div>
12   <div id="tab2" class="tab-slider--body">
13     <h2>Tab 2</h2>
14     <p>Tab 2 content</p>
15   </div>
16 </div>

2. Style the tabbed content & tab navigation in the CSS.

view source
01 .tab-slider--nav {
02   width: 100%;
03   float: left;
04   margin-bottom: 20px;
05 }
06  
07 .tab-slider--tabs {
08   display: block;
09   float: left;
10   margin: 0;
11   padding: 0;
12   list-style: none;
13   position: relative;
14   border-radius: 35px;
15   overflow: hidden;
16   background: #fff;
17   height: 35px;
18   -webkit-user-select: none;
19   -moz-user-select: none;
20   -ms-user-select: none;
21   user-select: none;
22 }
23  
24 .tab-slider--tabs:after {
25   content: "";
26   width: 50%;
27   background: #345F90;
28   height: 100%;
29   position: absolute;
30   top: 0;
31   left: 0;
32   -webkit-transition: all 250ms ease-in-out;
33   transition: all 250ms ease-in-out;
34   border-radius: 35px;
35 }
36  
37 .tab-slider--tabs.slide:after { left: 50%; }
38  
39 .tab-slider--trigger {
40   font-size: 12px;
41   line-height: 1;
42   font-weight: bold;
43   color: #345F90;
44   text-transform: uppercase;
45   text-align: center;
46   padding: 11px 20px;
47   position: relative;
48   z-index: 2;
49   cursor: pointer;
50   display: inline-block;
51   -webkit-transition: color 250ms ease-in-out;
52   transition: color 250ms ease-in-out;
53   -webkit-user-select: none;
54   -moz-user-select: none;
55   -ms-user-select: none;
56   user-select: none;
57 }
58  
59 .tab-slider--trigger.active { color: #fff; }
60  
61 .tab-slider--body { margin-bottom: 20px; }

3. Include the latest version of the jQuery JavaScript library at the bottom of the page.

view source
1 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

4. The jQuery script to active the sliding tabs.

view source
01 $("document").ready(function(){
02   $(".tab-slider--body").hide();
03   $(".tab-slider--body:first").show();
04 });
05  
06 $(".tab-slider--nav li").click(function() {
07   $(".tab-slider--body").hide();
08   var activeTab = $(this).attr("rel");
09   $("#"+activeTab).fadeIn();
10   if($(this).attr("rel") == "tab2"){
11     $('.tab-slider--tabs').addClass('slide');
12   }else{
13     $('.tab-slider--tabs').removeClass('slide');
14   }
15   $( source : jqueryscript.net

Related posts: