Responsive Multipurpose Tabs & Accordion Plugin With jQuery
File Size: | 57.2 KB |
---|---|
Views Total: | 19796 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A responsive, multipurpose, ajax-enabled and mobile-friendly jQuery tabbed content plugin which automatically switches between tabs and accordion interfaces depending on the screen size.
How to use it:
1. Add references to the JavaScript and CSS files to the webpage that you want to display the tabs & accordion interfaces.
<script src="//code.jquery.com/jquery-3.0.0.min.js"></script> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery.multipurpose_tabcontent.js"></script>
2. The required html structure for the tabs & accordion interfaces.
<div class="tab_wrapper demo"> <ul class="tab_list"> <li class="active">Tab 1</li> <li>Tab 2</li> <li>Tab 3</li> </ul> <div class="content_wrapper"> <div class="tab_content active"> <h3>Tab content 1</h3> </div> <div class="tab_content"> <h3>Tab content 2</h3> </div> <div class="tab_content"> <h3>Tab content 3</h3> </div> </div> </div>
3. Initialize the plugin to generate a basic responsive tabs interface.
$(".demo").champ();
4. Initialize the plugin to generate a basic responsive accordion interface.
$(".demo").champ({ plugin_type : "accordion" });
5. Change the default position of tab navigation.
$(".accordion_example").champ({ side : "left", // or right });
6. Set the initial staring tab.
$(".demo").champ({ active_tab : "3" });
7. Enable / disable controllers.
$(".demo").champ({ controllers:"false" });
8. Load tab content via AJAX requests.
$(".demo").champ({ ajax:"true", show_ajax_content_in_tab:"2", content_path:"ajax.html" });
Changelog:
2018-08-03
- Update jquery.multipurpose_tabcontent.js
2018-07-28
- JS update
v1.6.0 (2018-07-25)
- New release
- minor bug fixes
- CSS update
This awesome jQuery plugin is developed by bhaveshcmedhekar. For more Advanced Usages, please check the demo page or visit the official website.