- can be use for Multiple Tabs (Tabs inside tabs)
- If there are multiple tabs, first tab list canbe converted into dropdown
- 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)
- 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();
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.
type waht to set as tab or accordiondefault: 'tab' options: 'tab', 'accordion'set tab list position.
default: 'top' options: 'left', 'right', 'top'set initial active tab
default: '1' options: 'numaric values'If true, "Next" / "Prev" controls will be added
default: 'false' options: boolean (true / false)If true, content can be added through ajax.
default: 'false' options: boolean (true / false)If option 'ajax' is true then, 'show_ajax_content_in_tab' will show content in specified tab number.
default: '1' options: 'numaric values'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' If true, "Next" / "Prev" controls will be added
default: 'false' options: boolean (true / false)If true, content can be added through ajax.
default: 'false' options: boolean (true / false)If option 'ajax' is true then, 'show_ajax_content_in_tab' will show content in specified tab number.
default: '1' options: 'numaric values'If option 'ajax' is true then, 'content_path' will show content in specified tab content area.
default: 'false' options: 'file path'If true, First tablist can be converted into dropdown
default: 'false' options: boolean (true / false)