Responsive Multipurpose Tabs & Accordion Plugin With jQuery

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.