Welcome to Help center

We are here to help

Tabs

Follow

HTML:
        <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
            <li><a href="#profile" data-toggle="tab">...</a></li>
            <li><a href="#messages" data-toggle="tab">...</a></li>
            <li class="active"><a href="#packages" data-toggle="tab">...</a></li>
        </ul>
        <div class="tab-content">
            <div id="profile" class="tab-pane">...</div>
            <div id="messages" class="tab-pane">...</div>
            <div id="packages" class="tab-pane active">...</div>
        </div>
    
Js
        $('.tabs .tab-links a').on('click', function(e)  {
            var currentAttrValue = $(this).attr('href');
            var priceSlider = $('.jslider').detach();
            $('.tabs ' + currentAttrValue).slideDown(400).siblings().slideUp(400);
            $(this).parent('li').addClass('active').siblings().removeClass('active');
    

In order for range-slider to save its values when switching between tabs:

            priceSlider.appendTo($('.tabs ' + currentAttrValue).find('.price-range-wrapper'));
            priceSlider = null;
            e.preventDefault();
        });
    

 

Have more questions?

Submit a request

Comments

Top
Powered by Zendesk