🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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.

tabs responsive-tabs

Documentation

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) 

You May Also Like