scripts.js

(function ($) {

    $(document).ready(function () {

        /** Begin main tabs */

        // first tab is active as default.
        $('.table-sections').find('.table-section:first-child').addClass('selected');

        $('.table-sections').find('.table-section').on('click', function (e) {

            $mainTab = $(this);

            $mainTab.parents('.table-sections').find('.table-section').removeClass('selected');

            // do select or close current clicked on tab
            if ($mainTab.hasClass('selected')) {
                // meaning tab is selected and now click again it should be close.
                $mainTab.removeClass('selected');
            } else {

                // tab is closed and need open
                $mainTab.addClass('selected').show();
            }

            e.preventDefault();
        })
        /** END main tabs */


        /** Begin sub tabs */
        // default first of tab is active, so we need selected it
        $('.table-section-tabs').find('.table-section-tab:first').addClass('selected');

        // tab section click on
        $('.table-section-tabs').find('.table-section-tab').on('click', function (e) {
            $thisTab = $(this);

            // close other tabs
            $thisTab.parents('.table-section-tabs').find('.table-section-tab').removeClass('selected');


            // do select or close current clicked on tab
            if ($thisTab.hasClass('selected')) {
                // meaning tab is selected and now click again it should be close.
                $thisTab.removeClass('selected');
            } else {

                // tab is closed and need open
                $thisTab.addClass('selected');
            }

            e.preventDefault();
        });

        /** End sub tabs */


    });

}(jQuery));