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.

11 + twenty =

    skype

    Need Coding Help?

    Connect Skype

    ACF

    JavaScript

    jQuery

    Others

    PHP

    WooCommerce

    WordPress

    Counter up with a simple jQuery

    count down numbers with jquery ...

    Sticky Menu Show when scrolling up

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

    Simple jQuery Accordion Collapse

    Custom coded Simple jQuery Accordion with toggle a ...

    Jquery Replace specific text in all element

    ...

    Cookie Popup with jQuery

    Browser cookies popup accept, store cookies in bro ...

    top