jQuery Responsive Tabs To Accordion – smartTabs.js

Tabs
Demo    Download
Responsive-Tabs-Accordion-Plugin-smartTabs
File Size: 53.32 KB
Views Total: 1534 views
Last Update:July 27, 2016
Publish Date: December 06, 2014
Official Website: Go to website
License: MIT
Plugin Author: influxweb

A lightweight smartTabs jQuery plugin for creating static or responsive tabs/accordions. It can  controls that help you present content sections active accordion in mobile and tablet devices and active tabs on desktop and laptop. responsive tabs in jQuery. responsive tabs convert in to accordion

Table of Contents

How to use it:

1. Add the JQuery library and the jQuery smart tabs plugin in your Html page :

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="smartTabs.js"></script>

2. Create a tabs/accordion control using Html :

<dl id="demo" class="smart-tabs">

    <dt><a href="#">Tab One</a></dt>
    <dd> Content section one </dd>

    <dt><a href="#">Tab Two</a></dt>
    <dd> Content section two </dd>

    <dt><a href="#">Tab Three</a></dt>
    <dd> Content section three </dd>

</dl>

3. Call the plugin with default options :

$('#demo').smartTabs();

4. Available all options :

$('#demo').smartTabs({
// the class applied to the currently active tab or accordion.
activeClass: "current",

// the breakpoint at which you would like the tabs to convert to accordions
breakpoint: 768,

// A selector or DOM element that you would like to test the "outerWidth" of against the "breakpoint" specified.
breakTrigger: d(window),

// fixed or auto
contentHeight: "fixed",

// auto: responsive tab to accordion layout.
// tabs: static tabs layout
// accordion: static accordion layout
layout: "auto"
});

List Of Version :
  • v2.0.0

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.