New Features
  • can be use for Multiple Tabs (Tabs inside tabs)
  • If there are multiple tabs, first tab list canbe converted into dropdown
Features
  • Has option to show same structure in accordion
  • Tabs transform to accordion based on breakpoint
  • Has option for tab's different layout (tabs on top/left/right side)
  • Uses javascript / jQuery for the technical tab switching (class based)
  • Uses CSS for the desktop/tablet/mobile view
  • Has callback events for the tab events
  • Tabs can be switched using controllers (previous/ next)
  • Specific tab can be kept opened on load
  • Tab content can be added using "Ajax"
  • Cross browser compatibility (IE7+, Chrome, Firefox, Safari and Opera)
  • Multiple device support (Web, Tablet, Mobile, etc)
usage
  • Make sure you’ve got jQuery added to your page (minimaly jQuery 1.7.0)
  • Include jquery.multipurpose_tabcontent.js
1
 
<script src="js/jquery.multipurpose_tabcontent.js"></script>
  • Include style.css for a basic tab/accordion theme
1
2
 
<!-- Edit this file to change the style of the tabs/accordion -->
<link type="text/css" rel="stylesheet" href="css/style.css" />
  • Use this HTML markup:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
 
<div class="tab_wrapper">
    <ul>
        <li>.... </li>
        <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>
  • Use this jQuery function to enable responsive tabs on the selected element:
1

$('.tab_wrapper').champ();
Options

No two projects are the same. That is why multipurpose_tabcontent is packed full of options that allow the tab/accordion to adapt to the project’s specific needs. Check the options for implementation.

General

plugin_type

type waht to set as tab or accordion

default: 'tab'

options: 'tab', 'accordion'

side

set tab list position.

default: 'top'

options: 'left', 'right', 'top'

active_tab

set initial active tab

default: '1'

options: 'numaric values'

controllers

If true, "Next" / "Prev" controls will be added

default: 'false'

options: boolean (true / false)

ajax

If true, content can be added through ajax.

default: 'false'

options: boolean (true / false)

show_ajax_content_in_tab

If option 'ajax' is true then, 'show_ajax_content_in_tab' will show content in specified tab number.

default: '1'

options: 'numaric values'

content_path

If option 'ajax' is true then, 'content_path' will show content in specified tab content area.

default: 'false'

options: 'file path'

multiple_tabs

If true, First tablist can be converted into dropdown

default: 'false'

options: boolean (true / false)