New Features Added

• 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

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

• Include style.css for a basic tab/accordion theme

<!-- 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:

<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:

$('.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'

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)