Responsive Supported jQuery Tab Plugin – Multipurpose Tabcontent

Multipurpose tabcontent is a fully responsive and multiple devices supported jQuery tabs plugin that can be used for multiple requirements for a website. Multipurpose tabs transform default tabs to an accordion on responsive devices easily. The tabs have multiple design options and you can choose any design for the tabs that suits your project.

Features:

• Tabs easily transform to an accordion-based on CSS breakpoint.
• Supports next and previous options for the tabs.
• Multiple design options.
• Supports on all modern browsers and devices.
• Uses CSS for the desktop/tablet/mobile view.
• A specific tab can be kept open on load.

How to use it:

1. Include the Javascript jquery.multipurpose_tabcontent.js at the bottom of the web page.

<script src="path/to/jquery.multipurpose_tabcontent.js"></script>

2. Include the CSS style.css in the header of the page.

<link rel="stylesheet" href="path/to/style.css">

3. Add the basic HTML to the page.

<div id="tab-default" class="tab_wrapper">
    <ul>
      <li>....</li>
      <li>....</li>
      <li>....</li>
    </ul>
    <div class="content_wrapper">
      <div class="tab_content">.......</div>
      <div class="tab_content">.......</div>
      <div class="tab_content">.......</div>
  </div>
</div>

4. Initialize the plugin and we’re ready to go.

$('#tab-default').champ();

Plugin’s default options: