PWS Tabs jQuery Plugin

by Alex Chizhov

GitHub: alexchizhovcom / pwstabs

Demos Documentation Options Download

Help me improve, share PWS Tabs jQuery Plugin with your friends.

Install with Bower

$ bower install pwstabs

Demos

New Feature - Themes support

Light flat theme:

Dark flat theme:

Default Usage

$('.tabset0').pwstabs();

Nested Tabs Code

$('.tabsetnested1').pwstabs({
    tabsPosition: 'vertical',
});

$('.tabsetnested2').pwstabs();
trivoo.net
PWS Tabs jQuery Plugin

Tab With Mixed Content

Quisque magna elit, maximus vel neque eget, laoreet commodo neque. Duis elementum ligula id metus rutrum, non vestibulum augue porttitor. Duis ullamcorper urna erat, vel convallis ipsum mattis vitae. Proin porttitor urna a enim ultrices ultrices. Etiam lacus elit, tincidunt vitae congue eu, sagittis sit amet ipsum. Nulla facilisi. Curabitur id elementum est. In eget lectus euismod, efficitur lorem sed, feugiat sem. Donec vel massa mi.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo metus, sollicitudin in tempus a, tristique ut eros. Aenean sit amet tempus leo, et hendrerit nibh. Vestibulum sollicitudin nisl purus, sit amet fringilla metus consectetur rhoncus. Maecenas ultrices metus ut aliquam feugiat. Donec eleifend vel ante sit amet tristique. Proin vitae interdum lectus. Nam a turpis hendrerit odio eleifend varius vel sed elit. Praesent auctor erat sed aliquet tempus. Etiam porttitor erat eu turpis egestas cursus. Vivamus varius vulputate lacus, vitae dictum libero gravida a. Nunc ac arcu tortor. Nulla suscipit ultricies nisl sit amet sodales. Praesent ultricies vestibulum magna at cursus. Cras venenatis tellus sed justo mattis rhoncus ut ac justo. Etiam ullamcorper massa ac dui suscipit, non pulvinar eros egestas.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo metus, sollicitudin in tempus a, tristique ut eros. Aenean sit amet tempus leo, et hendrerit nibh. Vestibulum sollicitudin nisl purus, sit amet fringilla metus consectetur rhoncus. Maecenas ultrices metus ut aliquam feugiat. Donec eleifend vel ante sit amet tristique. Proin vitae interdum lectus. Nam a turpis hendrerit odio eleifend varius vel sed elit. Praesent auctor erat sed aliquet tempus. Etiam porttitor erat eu turpis egestas cursus. Vivamus varius vulputate lacus, vitae dictum libero gravida a. Nunc ac arcu tortor. Nulla suscipit ultricies nisl sit amet sodales. Praesent ultricies vestibulum magna at cursus. Cras venenatis tellus sed justo mattis rhoncus ut ac justo. Etiam ullamcorper massa ac dui suscipit, non pulvinar eros egestas.
Ut metus turpis, rhoncus ut lacus auctor, lobortis rutrum ex. Phasellus at sodales velit. Proin quis facilisis sem. Maecenas eu posuere tellus, eget accumsan ex. Nulla eget auctor ipsum, at tempus magna. Vestibulum molestie a diam eleifend eleifend. Praesent eleifend in lectus et maximus. Vivamus vitae justo magna. Proin ultrices ex sed turpis pellentesque eleifend. Integer accumsan gravida est a venenatis. Aenean volutpat nunc vitae libero condimentum pharetra.
Nunc convallis aliquam magna, in lobortis lorem pellentesque quis. Proin a pharetra purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque eros quam, scelerisque id euismod ut, porta nec urna. Etiam consectetur velit elit. Suspendisse varius nisl tortor, vitae viverra est bibendum a. Pellentesque dapibus lorem nec fringilla pharetra. Fusce ac cursus mi. Nam scelerisque ultricies lobortis. Nullam scelerisque lorem diam, sit amet tincidunt lorem viverra vel. Quisque aliquet arcu nec lorem accumsan, id pulvinar urna molestie.
Ut metus turpis, rhoncus ut lacus auctor, lobortis rutrum ex. Phasellus at sodales velit. Proin quis facilisis sem. Maecenas eu posuere tellus, eget accumsan ex. Nulla eget auctor ipsum, at tempus magna. Vestibulum molestie a diam eleifend eleifend. Praesent eleifend in lectus et maximus. Vivamus vitae justo magna. Proin ultrices ex sed turpis pellentesque eleifend. Integer accumsan gravida est a venenatis. Aenean volutpat nunc vitae libero condimentum pharetra.
Nunc convallis aliquam magna, in lobortis lorem pellentesque quis. Proin a pharetra purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque eros quam, scelerisque id euismod ut, porta nec urna. Etiam consectetur velit elit. Suspendisse varius nisl tortor, vitae viverra est bibendum a. Pellentesque dapibus lorem nec fringilla pharetra. Fusce ac cursus mi. Nam scelerisque ultricies lobortis. Nullam scelerisque lorem diam, sit amet tincidunt lorem viverra vel. Quisque aliquet arcu nec lorem accumsan, id pulvinar urna molestie.

Effect: Scale

$('.tabset1').pwstabs({
        effect: 'scale',
        defaultTab: 3,
        containerWidth: '600px'
    });
Cras semper dui non ante mattis blandit. Sed turpis nisi, vehicula a augue a, blandit mollis tellus. Nullam bibendum quam at pulvinar convallis. Donec molestie tempor aliquam. Etiam sed aliquet eros. Nam eleifend, libero at interdum ornare, turpis metus semper justo, quis posuere neque nulla sed lorem. Fusce at consectetur sem, sed varius nibh. Donec ac ipsum pharetra sapien pellentesque porttitor et eget nibh. Pellentesque non nisl varius, pulvinar dolor id, placerat mauris. Suspendisse vestibulum semper magna, sed tristique mi gravida vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eu consectetur libero, id venenatis nunc. Nullam ullamcorper auctor nulla, rutrum euismod justo auctor id. Aenean velit tellus, suscipit eu pulvinar vitae, placerat non odio.
Donec pellentesque placerat mi, at rutrum metus tempor posuere. Nunc ut pellentesque purus. Nam auctor, magna eget elementum maximus, ligula augue ornare massa, id varius magna mi vel diam. Cras vel pharetra risus. Suspendisse eu varius nisl, a laoreet est. Proin vitae erat metus. Curabitur dictum elit in ante feugiat cursus.
Quisque magna elit, maximus vel neque eget, laoreet commodo neque. Duis elementum ligula id metus rutrum, non vestibulum augue porttitor. Duis ullamcorper urna erat, vel convallis ipsum mattis vitae. Proin porttitor urna a enim ultrices ultrices. Etiam lacus elit, tincidunt vitae congue eu, sagittis sit amet ipsum. Nulla facilisi. Curabitur id elementum est. In eget lectus euismod, efficitur lorem sed, feugiat sem. Donec vel massa mi.

Effect: SlideLeft

$('.tabset2').pwstabs({
   effect: 'slideleft',
   defaultTab: 2,
   containerWidth: '600px'
});
Quisque magna elit, maximus vel neque eget, laoreet commodo neque. Duis elementum ligula id metus rutrum, non vestibulum augue porttitor. Duis ullamcorper urna erat, vel convallis ipsum mattis vitae. Proin porttitor urna a enim ultrices ultrices. Etiam lacus elit, tincidunt vitae congue eu, sagittis sit amet ipsum. Nulla facilisi. Curabitur id elementum est. In eget lectus euismod, efficitur lorem sed, feugiat sem. Donec vel massa mi.
Cras semper dui non ante mattis blandit. Sed turpis nisi, vehicula a augue a, blandit mollis tellus. Nullam bibendum quam at pulvinar convallis. Donec molestie tempor aliquam. Etiam sed aliquet eros. Nam eleifend, libero at interdum ornare, turpis metus semper justo, quis posuere neque nulla sed lorem. Fusce at consectetur sem, sed varius nibh. Donec ac ipsum pharetra sapien pellentesque porttitor et eget nibh. Pellentesque non nisl varius, pulvinar dolor id, placerat mauris. Suspendisse vestibulum semper magna, sed tristique mi gravida vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eu consectetur libero, id venenatis nunc. Nullam ullamcorper auctor nulla, rutrum euismod justo auctor id. Aenean velit tellus, suscipit eu pulvinar vitae, placerat non odio.
Donec pellentesque placerat mi, at rutrum metus tempor posuere. Nunc ut pellentesque purus. Nam auctor, magna eget elementum maximus, ligula augue ornare massa, id varius magna mi vel diam. Cras vel pharetra risus. Suspendisse eu varius nisl, a laoreet est. Proin vitae erat metus. Curabitur dictum elit in ante feugiat cursus.

Effect: SlideRight

$('.tabset5').pwstabs({
   effect: 'slideright',
   defaultTab: 1,
   containerWidth: '600px'
});
Quisque magna elit, maximus vel neque eget, laoreet commodo neque. Duis elementum ligula id metus rutrum, non vestibulum augue porttitor. Duis ullamcorper urna erat, vel convallis ipsum mattis vitae. Proin porttitor urna a enim ultrices ultrices. Etiam lacus elit, tincidunt vitae congue eu, sagittis sit amet ipsum. Nulla facilisi. Curabitur id elementum est. In eget lectus euismod, efficitur lorem sed, feugiat sem. Donec vel massa mi.
Cras semper dui non ante mattis blandit. Sed turpis nisi, vehicula a augue a, blandit mollis tellus. Nullam bibendum quam at pulvinar convallis. Donec molestie tempor aliquam. Etiam sed aliquet eros. Nam eleifend, libero at interdum ornare, turpis metus semper justo, quis posuere neque nulla sed lorem. Fusce at consectetur sem, sed varius nibh. Donec ac ipsum pharetra sapien pellentesque porttitor et eget nibh. Pellentesque non nisl varius, pulvinar dolor id, placerat mauris. Suspendisse vestibulum semper magna, sed tristique mi gravida vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eu consectetur libero, id venenatis nunc. Nullam ullamcorper auctor nulla, rutrum euismod justo auctor id. Aenean velit tellus, suscipit eu pulvinar vitae, placerat non odio.
Donec pellentesque placerat mi, at rutrum metus tempor posuere. Nunc ut pellentesque purus. Nam auctor, magna eget elementum maximus, ligula augue ornare massa, id varius magna mi vel diam. Cras vel pharetra risus. Suspendisse eu varius nisl, a laoreet est. Proin vitae erat metus. Curabitur dictum elit in ante feugiat cursus.

Effect: SlideTop

$('.tabset3').pwstabs({
   effect: 'slidetop',
   defaultTab: 3,
   containerWidth: '600px'
});
Quisque magna elit, maximus vel neque eget, laoreet commodo neque. Duis elementum ligula id metus rutrum, non vestibulum augue porttitor. Duis ullamcorper urna erat, vel convallis ipsum mattis vitae. Proin porttitor urna a enim ultrices ultrices. Etiam lacus elit, tincidunt vitae congue eu, sagittis sit amet ipsum. Nulla facilisi. Curabitur id elementum est. In eget lectus euismod, efficitur lorem sed, feugiat sem. Donec vel massa mi.
Cras semper dui non ante mattis blandit. Sed turpis nisi, vehicula a augue a, blandit mollis tellus. Nullam bibendum quam at pulvinar convallis. Donec molestie tempor aliquam. Etiam sed aliquet eros. Nam eleifend, libero at interdum ornare, turpis metus semper justo, quis posuere neque nulla sed lorem. Fusce at consectetur sem, sed varius nibh. Donec ac ipsum pharetra sapien pellentesque porttitor et eget nibh. Pellentesque non nisl varius, pulvinar dolor id, placerat mauris. Suspendisse vestibulum semper magna, sed tristique mi gravida vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eu consectetur libero, id venenatis nunc. Nullam ullamcorper auctor nulla, rutrum euismod justo auctor id. Aenean velit tellus, suscipit eu pulvinar vitae, placerat non odio.
Donec pellentesque placerat mi, at rutrum metus tempor posuere. Nunc ut pellentesque purus. Nam auctor, magna eget elementum maximus, ligula augue ornare massa, id varius magna mi vel diam. Cras vel pharetra risus. Suspendisse eu varius nisl, a laoreet est. Proin vitae erat metus. Curabitur dictum elit in ante feugiat cursus.

Effect: SlideDown

$('.tabset4').pwstabs({
   effect: 'slidedown',
   defaultTab: 2,
   containerWidth: '600px'
});
Quisque magna elit, maximus vel neque eget, laoreet commodo neque. Duis elementum ligula id metus rutrum, non vestibulum augue porttitor. Duis ullamcorper urna erat, vel convallis ipsum mattis vitae. Proin porttitor urna a enim ultrices ultrices. Etiam lacus elit, tincidunt vitae congue eu, sagittis sit amet ipsum. Nulla facilisi. Curabitur id elementum est. In eget lectus euismod, efficitur lorem sed, feugiat sem. Donec vel massa mi.
Cras semper dui non ante mattis blandit. Sed turpis nisi, vehicula a augue a, blandit mollis tellus. Nullam bibendum quam at pulvinar convallis. Donec molestie tempor aliquam. Etiam sed aliquet eros. Nam eleifend, libero at interdum ornare, turpis metus semper justo, quis posuere neque nulla sed lorem. Fusce at consectetur sem, sed varius nibh. Donec ac ipsum pharetra sapien pellentesque porttitor et eget nibh. Pellentesque non nisl varius, pulvinar dolor id, placerat mauris. Suspendisse vestibulum semper magna, sed tristique mi gravida vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eu consectetur libero, id venenatis nunc. Nullam ullamcorper auctor nulla, rutrum euismod justo auctor id. Aenean velit tellus, suscipit eu pulvinar vitae, placerat non odio.
Donec pellentesque placerat mi, at rutrum metus tempor posuere. Nunc ut pellentesque purus. Nam auctor, magna eget elementum maximus, ligula augue ornare massa, id varius magna mi vel diam. Cras vel pharetra risus. Suspendisse eu varius nisl, a laoreet est. Proin vitae erat metus. Curabitur dictum elit in ante feugiat cursus.

Effect: None

$('.tabset10').pwstabs({
   effect: 'none',
   containerWidth: '600px'
});
Quisque magna elit, maximus vel neque eget, laoreet commodo neque. Duis elementum ligula id metus rutrum, non vestibulum augue porttitor. Duis ullamcorper urna erat, vel convallis ipsum mattis vitae. Proin porttitor urna a enim ultrices ultrices. Etiam lacus elit, tincidunt vitae congue eu, sagittis sit amet ipsum. Nulla facilisi. Curabitur id elementum est. In eget lectus euismod, efficitur lorem sed, feugiat sem. Donec vel massa mi.
Cras semper dui non ante mattis blandit. Sed turpis nisi, vehicula a augue a, blandit mollis tellus. Nullam bibendum quam at pulvinar convallis. Donec molestie tempor aliquam. Etiam sed aliquet eros. Nam eleifend, libero at interdum ornare, turpis metus semper justo, quis posuere neque nulla sed lorem. Fusce at consectetur sem, sed varius nibh. Donec ac ipsum pharetra sapien pellentesque porttitor et eget nibh. Pellentesque non nisl varius, pulvinar dolor id, placerat mauris. Suspendisse vestibulum semper magna, sed tristique mi gravida vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eu consectetur libero, id venenatis nunc. Nullam ullamcorper auctor nulla, rutrum euismod justo auctor id. Aenean velit tellus, suscipit eu pulvinar vitae, placerat non odio.
Donec pellentesque placerat mi, at rutrum metus tempor posuere. Nunc ut pellentesque purus. Nam auctor, magna eget elementum maximus, ligula augue ornare massa, id varius magna mi vel diam. Cras vel pharetra risus. Suspendisse eu varius nisl, a laoreet est. Proin vitae erat metus. Curabitur dictum elit in ante feugiat cursus.

RTL Support

$('.tabset6').pwstabs({
   effect: 'slidedown',
   defaultTab: 2,
   containerWidth: '600px',
   rtl: true
});
Quisque magna elit, maximus vel neque eget, laoreet commodo neque. Duis elementum ligula id metus rutrum, non vestibulum augue porttitor. Duis ullamcorper urna erat, vel convallis ipsum mattis vitae. Proin porttitor urna a enim ultrices ultrices. Etiam lacus elit, tincidunt vitae congue eu, sagittis sit amet ipsum. Nulla facilisi. Curabitur id elementum est. In eget lectus euismod, efficitur lorem sed, feugiat sem. Donec vel massa mi.
Cras semper dui non ante mattis blandit. Sed turpis nisi, vehicula a augue a, blandit mollis tellus. Nullam bibendum quam at pulvinar convallis. Donec molestie tempor aliquam. Etiam sed aliquet eros. Nam eleifend, libero at interdum ornare, turpis metus semper justo, quis posuere neque nulla sed lorem. Fusce at consectetur sem, sed varius nibh. Donec ac ipsum pharetra sapien pellentesque porttitor et eget nibh. Pellentesque non nisl varius, pulvinar dolor id, placerat mauris. Suspendisse vestibulum semper magna, sed tristique mi gravida vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eu consectetur libero, id venenatis nunc. Nullam ullamcorper auctor nulla, rutrum euismod justo auctor id. Aenean velit tellus, suscipit eu pulvinar vitae, placerat non odio.
Donec pellentesque placerat mi, at rutrum metus tempor posuere. Nunc ut pellentesque purus. Nam auctor, magna eget elementum maximus, ligula augue ornare massa, id varius magna mi vel diam. Cras vel pharetra risus. Suspendisse eu varius nisl, a laoreet est. Proin vitae erat metus. Curabitur dictum elit in ante feugiat cursus.

Tabs Position Horizontal Bottom

$('.tabset7').pwstabs({
   effect: 'slidedown',
   defaultTab: 2,
   containerWidth: '600px',
   horizontalPosition: 'bottom'
});
Quisque magna elit, maximus vel neque eget, laoreet commodo neque. Duis elementum ligula id metus rutrum, non vestibulum augue porttitor. Duis ullamcorper urna erat, vel convallis ipsum mattis vitae. Proin porttitor urna a enim ultrices ultrices. Etiam lacus elit, tincidunt vitae congue eu, sagittis sit amet ipsum. Nulla facilisi. Curabitur id elementum est. In eget lectus euismod, efficitur lorem sed, feugiat sem. Donec vel massa mi.
Cras semper dui non ante mattis blandit. Sed turpis nisi, vehicula a augue a, blandit mollis tellus. Nullam bibendum quam at pulvinar convallis. Donec molestie tempor aliquam. Etiam sed aliquet eros. Nam eleifend, libero at interdum ornare, turpis metus semper justo, quis posuere neque nulla sed lorem. Fusce at consectetur sem, sed varius nibh. Donec ac ipsum pharetra sapien pellentesque porttitor et eget nibh. Pellentesque non nisl varius, pulvinar dolor id, placerat mauris. Suspendisse vestibulum semper magna, sed tristique mi gravida vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eu consectetur libero, id venenatis nunc. Nullam ullamcorper auctor nulla, rutrum euismod justo auctor id. Aenean velit tellus, suscipit eu pulvinar vitae, placerat non odio.
Donec pellentesque placerat mi, at rutrum metus tempor posuere. Nunc ut pellentesque purus. Nam auctor, magna eget elementum maximus, ligula augue ornare massa, id varius magna mi vel diam. Cras vel pharetra risus. Suspendisse eu varius nisl, a laoreet est. Proin vitae erat metus. Curabitur dictum elit in ante feugiat cursus.

Tabs Position Vertical Left

$('.tabset8').pwstabs({
   effect: 'slideleft',
   defaultTab: 1,
   containerWidth: '600px',
   tabsPosition: 'vertical',
   verticalPosition: 'left'
});
Quisque magna elit, maximus vel neque eget, laoreet commodo neque. Duis elementum ligula id metus rutrum, non vestibulum augue porttitor. Duis ullamcorper urna erat, vel convallis ipsum mattis vitae. Proin porttitor urna a enim ultrices ultrices. Etiam lacus elit, tincidunt vitae congue eu, sagittis sit amet ipsum. Nulla facilisi. Curabitur id elementum est. In eget lectus euismod, efficitur lorem sed, feugiat sem. Donec vel massa mi.
Cras semper dui non ante mattis blandit. Sed turpis nisi, vehicula a augue a, blandit mollis tellus. Nullam bibendum quam at pulvinar convallis. Donec molestie tempor aliquam. Etiam sed aliquet eros. Nam eleifend, libero at interdum ornare, turpis metus semper justo, quis posuere neque nulla sed lorem. Fusce at consectetur sem, sed varius nibh. Donec ac ipsum pharetra sapien pellentesque porttitor et eget nibh. Pellentesque non nisl varius, pulvinar dolor id, placerat mauris. Suspendisse vestibulum semper magna, sed tristique mi gravida vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eu consectetur libero, id venenatis nunc. Nullam ullamcorper auctor nulla, rutrum euismod justo auctor id. Aenean velit tellus, suscipit eu pulvinar vitae, placerat non odio.
Donec pellentesque placerat mi, at rutrum metus tempor posuere. Nunc ut pellentesque purus. Nam auctor, magna eget elementum maximus, ligula augue ornare massa, id varius magna mi vel diam. Cras vel pharetra risus. Suspendisse eu varius nisl, a laoreet est. Proin vitae erat metus. Curabitur dictum elit in ante feugiat cursus.

Tabs Position Vertical Right

$('.tabset9').pwstabs({
   effect: 'slideright',
   defaultTab: 1,
   containerWidth: '600px',
   tabsPosition: 'vertical',
   verticalPosition: 'right'
});
Quisque magna elit, maximus vel neque eget, laoreet commodo neque. Duis elementum ligula id metus rutrum, non vestibulum augue porttitor. Duis ullamcorper urna erat, vel convallis ipsum mattis vitae. Proin porttitor urna a enim ultrices ultrices. Etiam lacus elit, tincidunt vitae congue eu, sagittis sit amet ipsum. Nulla facilisi. Curabitur id elementum est. In eget lectus euismod, efficitur lorem sed, feugiat sem. Donec vel massa mi.
Cras semper dui non ante mattis blandit. Sed turpis nisi, vehicula a augue a, blandit mollis tellus. Nullam bibendum quam at pulvinar convallis. Donec molestie tempor aliquam. Etiam sed aliquet eros. Nam eleifend, libero at interdum ornare, turpis metus semper justo, quis posuere neque nulla sed lorem. Fusce at consectetur sem, sed varius nibh. Donec ac ipsum pharetra sapien pellentesque porttitor et eget nibh. Pellentesque non nisl varius, pulvinar dolor id, placerat mauris. Suspendisse vestibulum semper magna, sed tristique mi gravida vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eu consectetur libero, id venenatis nunc. Nullam ullamcorper auctor nulla, rutrum euismod justo auctor id. Aenean velit tellus, suscipit eu pulvinar vitae, placerat non odio.
Donec pellentesque placerat mi, at rutrum metus tempor posuere. Nunc ut pellentesque purus. Nam auctor, magna eget elementum maximus, ligula augue ornare massa, id varius magna mi vel diam. Cras vel pharetra risus. Suspendisse eu varius nisl, a laoreet est. Proin vitae erat metus. Curabitur dictum elit in ante feugiat cursus.

Tabs with icons

$('.tabset11').pwstabs({
   effect: 'scale',
   containerWidth: '600px'
});
Quisque magna elit, maximus vel neque eget, laoreet commodo neque. Duis elementum ligula id metus rutrum, non vestibulum augue porttitor. Duis ullamcorper urna erat, vel convallis ipsum mattis vitae. Proin porttitor urna a enim ultrices ultrices. Etiam lacus elit, tincidunt vitae congue eu, sagittis sit amet ipsum. Nulla facilisi. Curabitur id elementum est. In eget lectus euismod, efficitur lorem sed, feugiat sem. Donec vel massa mi.
Cras semper dui non ante mattis blandit. Sed turpis nisi, vehicula a augue a, blandit mollis tellus. Nullam bibendum quam at pulvinar convallis. Donec molestie tempor aliquam. Etiam sed aliquet eros. Nam eleifend, libero at interdum ornare, turpis metus semper justo, quis posuere neque nulla sed lorem. Fusce at consectetur sem, sed varius nibh. Donec ac ipsum pharetra sapien pellentesque porttitor et eget nibh. Pellentesque non nisl varius, pulvinar dolor id, placerat mauris. Suspendisse vestibulum semper magna, sed tristique mi gravida vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eu consectetur libero, id venenatis nunc. Nullam ullamcorper auctor nulla, rutrum euismod justo auctor id. Aenean velit tellus, suscipit eu pulvinar vitae, placerat non odio.
Donec pellentesque placerat mi, at rutrum metus tempor posuere. Nunc ut pellentesque purus. Nam auctor, magna eget elementum maximus, ligula augue ornare massa, id varius magna mi vel diam. Cras vel pharetra risus. Suspendisse eu varius nisl, a laoreet est. Proin vitae erat metus. Curabitur dictum elit in ante feugiat cursus.

Documentation

Getting Started

1) Include jQuery library and jQuery PWS Tabs plugin in the <head> section.

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

<link type="text/css" rel="stylesheet" href="jquery.pwstabs.css">
<script src="jquery.pwstabs.js"></script>

2) Create tabbed panels and use HTML5 data-pws-* attributes to specify the ID & Name for the tabs.

<div class="hello_world">

   <div data-pws-tab="anynameyouwant1" data-pws-tab-name="Tab Title 1">Our first tab</div>
   <div data-pws-tab="anynameyouwant2" data-pws-tab-name="Tab Title 2">Our second tab</div>
   <div data-pws-tab="anynameyouwant3" data-pws-tab-name="Tab Title 3">Our third tab</div>

</div>

data-pws-tab is used to initiate the tab and as its ID.

data-pws-tab-name is used for a tab display name.

data-pws-tab-icon is used to add an icon to a tab. Full URL to the icon (image).

3) Call the plugin on the parent element to create a basic tabs interface with 100% width and 'scale' transition effect.

jQuery(document).ready(function($){
   $('.hello_world').pwstabs();        
});

4) Available parameters to customize the tabs plugin.

jQuery(document).ready(function($){
   $('.hello_world').pwstabs({

      // scale / slideleft / slideright / slidetop / slidedown / none
      effect: 'scale',
 
      // The tab to be opened by default
      defaultTab: 1,
 
      // Set custom container width
      // Any size value (1,2,3.. / px,pt,em,%,cm..)
      containerWidth: '100%',

      // Tabs position: horizontal / vertical
      tabsPosition: 'horizontal',
 
      // Tabs horizontal position: top / bottom
      horizontalPosition: 'top',

      // Tabs vertical position: left / right
      verticalPosition: 'left',

      // BETA: Make tabs container responsive: true / false (!!! BETA)
      responsive: false,

      // Themes available: default: '' / pws_theme_violet / pws_theme_green / pws_theme_yellow / pws_theme_gold /
      // pws_theme_orange / pws_theme_red / pws_theme_purple / pws_theme_grey
      theme: '',

      // Right to left support: true/ false
      rtl: false

   });        
});

5) PWS Tabs Plugin supports Font Awesome 4.5.0

5.1) Include Font Awesome stylesheet from assets directory:

<link type="text/css" rel="stylesheet" href="../assets/font-awesome/css/font-awesome.min.css">

5.2) Use HTML5 data-pws-tab-icon attribute to set an icon. Icon names you can find here: Font Awesome Icons.

<div class="hello_world">

   <div data-pws-tab="anynameyouwant1" data-pws-tab-name="Tab Title 1" data-pws-tab-icon="fa-heart">Our first tab</div>
   <div data-pws-tab="anynameyouwant2" data-pws-tab-name="Tab Title 2" data-pws-tab-icon="fa-star">Our second tab</div>
   <div data-pws-tab="anynameyouwant3" data-pws-tab-name="Tab Title 3" data-pws-tab-icon="fa-map-marker">Our third tab</div>

</div>

Options

Option Default Description Available options Type
effect scale Transition effect scale / slideleft / slideright / slidetop / slidedown / none string
defaultTab 1 Which tab is chosen by default Tab ID number starts with 1 (1,2,3..) number
containerWidth 100% Tabs container width Any size value (1,2,3.. / px,pt,em,%,cm..) string
tabsPosition horizontal Define tabs position horizontal / vertical string
horizontalPosition top Define Horizontal tabs position top / bottom string
verticalPosition left Define Vertical tabs position left / right string
theme '' Change tabs theme pws_theme_violet / pws_theme_green
pws_theme_yellow / pws_theme_gold
pws_theme_orange / pws_theme_red
pws_theme_purple / pws_theme_grey
pws_theme_dark_violet / pws_theme_dark_green
pws_theme_dark_yellow / pws_theme_dark_gold
pws_theme_dark_orange / pws_theme_dark_red
pws_theme_dark_purple / pws_theme_dark_grey
string
responsive false !!BETA!! Make tabs responsive true / false boolean
rtl false Right to left support true / false boolean