PWS Tabs Nested Tabs

Implementing nested tabs in PWS Tabs jQuery Plugin

by Alex Chizhov

HTML

<div class="tabset1">
  <div data-pws-tab="tab1" data-pws-tab-name="Tab 1">
    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.
    
    <div class="tabset2">
      <div data-pws-tab="tab4" data-pws-tab-name="Nested Tab 1">
      Inner tab 1
      
      <div class="tabset3">
      <div data-pws-tab="tab4" data-pws-tab-name="Inner tab 1">
      Inner level2 1
      </div>
      <div data-pws-tab="tab5" data-pws-tab-name="Inner tab 2">
      Inner level2 2
      </div>
      <div data-pws-tab="tab6" data-pws-tab-name="Inner tab 3">
      Inner level2 3
      </div>
    </div>
      
      </div>
      <div data-pws-tab="tab5" data-pws-tab-name="Nested Tab 2">
      Inner tab 2
      </div>
      <div data-pws-tab="tab6" data-pws-tab-name="Nested Tab 3">
      Inner tab 3
      </div>
    </div>
    
  </div>
  <div data-pws-tab="tab2" data-pws-tab-name="Tab 2">
    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.
  </div>
  <div...

CSS

/**
  * PWS Tabs jQuery Plugin
  * Author: Alex Chizhov
  * Author Website: http://alexchizhov.com/pwstabs
  * GitHub: https://github.com/alexchizhovcom/pwstabs
  * Version: 1.4.0
  * Version from: 20.08.2015
  * Licensed under the MIT license
  */
 
@media only screen and (max-width: 60em) {
  .pws_tabs_container.pws_tabs_responsive {
    width: 100% !important;
  }
  .pws_tabs_container.pws_tabs_responsive ul.pws_tabs_controll {
    width: 100%;
  }
  .pws_tabs_container.pws_tabs_responsive ul.pws_tabs_controll li {
    vertical-align: top;
    text-align: center;
  }
  .pws_tabs_container.pws_tabs_responsive ul.pws_tabs_controll li a {
    margin: 0;
    font-size: 1em;
    line-height: 1.125em;
    overflow: hidden;
  }
  .pws_tabs_container.pws_tabs_responsive ul.pws_tabs_controll li a i {
    display: block;
    margin: 0 0 5px 0;
  }
  .pws_tabs_container.pws_tabs_responsive.pws_tabs_vertical {
    display: block;
    position: relative;
  }
  .pws_tabs_container.pws_tabs_responsive.pws_tabs_vertical:after {
    display: block;
    content: '';
    clear: both;
  }
  .pws_tabs_container.pws_tabs_responsive.pws_tabs_vertical ul.pws_tabs_controll {
    width: 100%;
    position: relative;
    float: none;
  }
  .pws_tabs_container.pws_tabs_responsive.pws_tabs_vertical ul.pws_tabs_controll li {
    display: inline-block;
  }
  .pws_tabs_container.pws_tabs_responsive.pws_tabs_vertical ul.pws_tabs_controll li a {
    margin: 0;
  }
  .pws_tabs_container.pws_tabs_responsive.pws_tabs_vertical .pws_tabs_list {
    position: relative;
    float: none;
  }
}
@media only screen and (max-width: 37.5em) {
  .pws_tabs_container.pws_tabs_responsive {
    width: 100% !important;
    position: relative;
  }
  .pws_tabs_container.pws_tabs_responsive .pws_responsive_small_menu {
    width: 100%;
    height: 40px;
    background-color: #9bd7d5;
    display: block;
  }
  .pws_tabs_container.pws_tabs_responsive .pws_responsive_small_menu a {
    width: 40px;
    height: 40px;
 ...

JavaScript

/**
 * PWS Tabs jQuery Plugin
 * Author: Alex Chizhov
 * Author Website: http://alexchizhov.com/pwstabs
 * GitHub: https://github.com/alexchizhovcom/pwstabs
 * Version: 1.4.0
 * Version from: 06.03.2016
 * Licensed under the MIT license
 */
;
(function ($, window, document, undefined)
{

    var pluginName = "pwstabs",
            defaults = {
                effect: 'scale', // You can change effects of your tabs container: scale / slideleft / slideright / slidetop / slidedown / none
                defaultTab: 1, // The tab we want to be opened by default
                containerWidth: '100%', // Set custom container width if not set then 100% is used
                tabsPosition: 'horizontal', // Tabs position: horizontal / vertical
                horizontalPosition: 'top', // Tabs horizontal position: top / bottom
                verticalPosition: 'left', // Tabs vertical position: left / right
                responsive: false, // BETA: Make tabs container responsive: true / false - boolean
                theme: '', // Theme name, you can add your own and define it here. This way you dont have to change default CSS. theme: 'name' - string
                rtl: false                  // Right to left support: true/ false
            };


    function Plugin(element, options)
    {
        this.element = $(element);
        this.$elem = $(this.element);
        this.settings = $.extend({}, defaults, options);
        this._defaults = defaults;
        this._name = pluginName;

        this.init();
    }


    Plugin.prototype = {
        // Constructing Tabs Plugin
        init: function ()
        {

            // Array of effects @1.3.0
            var arEffects = [
                'scale',
                'slideleft',
                'slideright',
                'slidetop',
                'slidedown',
                'none'
            ];

            // Variable for our selector @1.3.0
            var selector = this.$elem;

            // Tabs...