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 *

one × five =

skype

Need Coding Help?

Connect Skype

ACF

Elementor

JavaScript

jQuery

Others

PHP

WooCommerce

WordPress

Simple jQuery Accordion Collapse

Custom coded Simple jQuery Accordion with toggle a ...

Sticky Menu Show when scrolling up

Header bar only show when scrolling up with simple ...

Jquery Replace specific text in all element

...

JQuery Auto Hight

jQuery height change after a specific time interva ...

Counter up with a simple jQuery

count down numbers with jquery ...

top