Jquery Custom Tab | Code For Developers

Jquery Custom Tab

HTML Code
<ul class="tab_menu">
    <li data-cat="tab1" class="active">tab1</li>
    <li data-cat="tab2">tab2</li>
    <li data-cat="tab3">tab3</li>
</ul>
<div class="tab_content">
    <div class="tab_content_item tab1 active">
        Tab content 1
    </div>
    <div class="tab_content_item tab2">
        Tab content 2
    </div>
    <div class="tab_content_item tab3">
        Tab content 3
    </div>
</div>
CSS code
.tab_content_item {
    display: none;
}

.tab_content_item.active {
    display: block;
}

ul.tab_menu {
    list-style: none;
    text-align: center;
}

ul.tab_menu li {
    display: inline-block;
    padding: 5px 10px;
}

ul.tab_menu li.active {
    color: #11c540;
}
jQuery code
$('ul.tab_menu li').click(function (e) {
    e.preventDefault();
    let current_cat = $(this).data('cat');
    //menu active
    let tab_menu = $(this).siblings();
    $(tab_menu).not($(this)).removeClass('active');
    $(this).addClass('active');
    // content acive 
    let tab_content = $(this).parent().next().children();
    $(tab_content).not('.' + current_cat).removeClass('active');
    $('.' + current_cat).addClass('active');
});
Previous Code

Conditional statement to show pagination

Conditional statement to show pagination on WordPr ...

Next Code

Add Custom element item in wp nav menu

Add Element on last item of wp nav menu ...

Leave a Reply

Your email address will not be published. Required fields are marked *

If you find it useful

Buy me a coffee

ACF

Elementor

JavaScript

jQuery

Others

PHP

WooCommerce

WordPress

Jquery Replace specific text in all element

...

JQuery Auto Hight

jQuery height change after a specific time interva ...

Adding and Removing Class Based on Element Visibility in the Viewport

Add class on element if it come in view and remove ...

Add Classe when the item visible

Add class on scroll to viewport jquery code ...

Sequential Fading jQuery Text Animation

This code animates text using jQuery, creating a s ...

top