Responsive Adaptive Tabs Widget with jQuery and CSS3
File Size: | 2.88 KB |
---|---|
Views Total: | 2082 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A responsive, adaptive, sleek-looking jQuery & CSS3 tabs widget that animates to the height of its content when switched. Powered by CSS3 transitions and transforms.
How to use it:
1. Create a tabbed navigation from an Html unordered list.
<ul class="tabs"> <li class="active">Home</li> <li>Gallery</li> <li>Author</li> </ul>
2. Create tabbed content.
<ul class="tab__content"> <li class="active"> <div class="content__wrapper"> Tab panel 1 </div> </li> <li> <div class="content__wrapper"> Tab Panel 2 </div> </li> <li> <div class="content__wrapper"> Tab panel 3 </div> </li> </ul>
3. Add the core tabs styles into your CSS file.
.tabs { display: table; table-layout: fixed; width: 100%; -webkit-transform: translateY(5px); transform: translateY(5px); } .tabs > li { transition-duration: .25s; display: table-cell; list-style: none; text-align: center; padding: 20px 20px 25px 20px; position: relative; overflow: hidden; cursor: pointer; color: white; } .tabs > li:before { z-index: -1; position: absolute; content: ""; width: 100%; height: 120%; top: 0; left: 0; background-color: rgba(255, 255, 255, 0.3); -webkit-transform: translateY(100%); transform: translateY(100%); transition-duration: .25s; border-radius: 5px 5px 0 0; } .tabs > li:hover:before { -webkit-transform: translateY(70%); transform: translateY(70%); } .tabs > li.active { color: #50555a; } .tabs > li.active:before { transition-duration: .5s; background-color: white; -webkit-transform: translateY(0); transform: translateY(0); } .tab__content { background-color: white; position: relative; width: 100%; border-radius: 5px; } .tab__content > li { width: 100%; position: absolute; top: 0; left: 0; display: none; list-style: none; } .tab__content > li .content__wrapper { text-align: center; border-radius: 5px; width: 100%; padding: 45px 40px 40px 40px; background-color: white; }
4. Load the latest version of jQuery library at the bottom of the web page.
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
5. The jQuery script to enable the adaptive tabs widget.
$(document).ready(function(){ var clickedTab = $(".tabs > .active"); var tabWrapper = $(".tab__content"); var activeTab = tabWrapper.find(".active"); var activeTabHeight = activeTab.outerHeight(); // Show tab on page load activeTab.show(); // Set height of wrapper on page load tabWrapper.height(activeTabHeight); $(".tabs > li").on("click", function() { // Remove class from active tab $(".tabs > li").removeClass("active"); // Add class active to clicked tab $(this).addClass("active"); // Update clickedTab variable clickedTab = $(".tabs .active"); // fade out active tab activeTab.fadeOut(250, function() { // Remove active class all tabs $(".tab__content > li").removeClass("active"); // Get index of clicked tab var clickedTabIndex = clickedTab.index(); // Add class active to corresponding tab $(".tab__content > li").eq(clickedTabIndex).addClass("active"); // update new active tab activeTab = $(".tab__content > .active"); // Update variable activeTabHeight = activeTab.outerHeight(); // Animate height of wrapper to new tab height tabWrapper.stop().delay(50).animate({ height: activeTabHeight }, 500, function() { // Fade in active tab activeTab.delay(50).fadeIn(250); }); }); }); });
This awesome jQuery plugin is developed by Lewitje. For more Advanced Usages, please check the demo page or visit the official website.