Dead Simple Responsive Tabs Plugin For jQuery - minimalTabs.js
File Size: | 7.09 KB |
---|---|
Views Total: | 1063 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
The minimalTabs.js jQuery plugin helps you helps you create a semantic, responsive tabs interface with support for keyboard navigation and dynamic resizing.
How to use it:
1. To get started, include the stylesheet jquery.minimalTabs.css
and JavaScript jquery.minimalTabs.js
on the webpage.
<link rel="stylesheet" href="jquery.minimalTabs.css"> <script src="https://code.jquery.com/jquery-latest.js"></script> <script src="jquery.minimalTabs.js"></script>
2. The html structure for the tabs & tab contents.
<div id="example" class="tabs-container"> <p class="tabs"> <a href="#Tab1" id="TabTitle1">Tab one</a> <a href="#Tab2" id="TabTitle2">Tab two</a> <a href="#Tab3" id="TabTitle3">Tab three</a> </p> <ul class="tabs-content"> <li id="Tab1" class="tab-content"> <p>Content of first tab.</p> </li> <li id="Tab2" class="tab-content"> <p>Content of second tab.</p> </li> <li id="Tab3" class="tab-content"> <p>Content of third tab.</p> </li> </ul> </div>
3. Initialize the plugin and done.
$("#example").minimalTabs();
This awesome jQuery plugin is developed by vinicius-stutz. For more Advanced Usages, please check the demo page or visit the official website.