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 ...

0 Comment

    Leave a Reply

    Your email address will not be published.

    5 + five =

    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 ...

    Cookie Popup with jQuery

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

    JQuery Auto Hight

    jQuery height change after a specific time interva ...

    ACF

    JavaScript

    jQuery

    Others

    PHP

    WooCommerce

    WordPress

    skype

    Need Coding Help?

    Connect Skype
    top