stylish Tabs & Wizard

by Farzad Cyrus

HTML

<!-- TABS -->
            <div class="standard-tabs tabs tabs-style-3" data-name="document">

                <!-- TABS HEADER-->
                <ul class="tabs-header container-xx-large">
                    <li data-target="tab-1"><a href="javascript:{}">Documentations</a></li>
                    <li data-target="tab-2"><a href="javascript:{}">Examples</a></li>
                </ul>
                <!-- /TABS HEADER -->

                <div class="container-fixed container-xx-large">


                    <!-- TABS BODY -->
                    <ul class="tabs-body">
                        <li data-name="tab-1">

                            <!-- TAB -->
                            <div id="wizard" data-name="wizard" data-tab-wizard>
                                @*<ul class="tabs-header is-hidden">
                                    <li data-target="tab-1" class="tabs-target"><a href="javascript:{}">First Tab</a></li>
                                    <li data-target="tab-2" class="tabs-target"><a href="javascript:{}">Second Tab</a></li>
                                </ul>*@
                                <ul class="tabs-body">
                                    <li data-name="tab-1" data-tab-title="First Tab">

                                        <!-- INNER -->
                                        <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
                    ...

CSS

.tabs-header > li,
.tabs-body > li {
  display: none;
}

.tab-active {display:block;}

JavaScript

// Stylish Tabs
// Version: 1.1
// Author: Farzad
// Copyright © 2016 Stylish Web, http://www.stylishweb.net
// Released Under MIT Licence

(function ($, document, window, location) {

    if ($.stylishTabs) {
        return;
    }

    var settings = {},
		tabs = {},
		url = {},
		urlString,
		i,
		temp,

		$window = $(window);

    // LOCAL STORAGE
    var storage = (function () {
        try {
            if (window.localStorage && window.localStorage !== null) {
                return {
                    save: function (param, key) {
                        if (typeof key === "object") {
                            key = JSON.stringify(key);
                        }
                        try {
                            localStorage.setItem(param, key);
                        } catch (e) {
                            if (e === "QUOTA_EXCEEDED_ERR") {
                                localStorage.clear();
                                localStorage.setItem(param, key);
                            }
                        }
                    },
                    load: function (param) {
                        try {
                            return JSON.parse(localStorage.getItem(param));
                        } catch (e) {
                            return localStorage.getItem(param);
                        }
                    },
                    del: function (param) {
                        localStorage.removeItem(param);
                    }
                };
            }
        } catch (e) {
            return {
                save: function () {
                    return null;
                },
                load: function () {
                    return null;
                },
                del: function () {
                    return null;
                }
            };
        }
        return null;
    }());

    // URL
    var getUrl = function () {
        if (settings.type === "hash") {
            urlString =...