CODEWITHSUNDEEP
jquerywordpresstwitter-bootstrap
Tre Ahmad
Tre Ahmad

Reputation: 47

How in wordpress bootstrap tab add active class to items and contents

I have function below it is work without any problem only don't add the active class in nav-tabs li and tab-content div during click on items.

problem in my code: only don't add class to these to lines below

$item_output .= '<li>';
$item_output .= '<div class="tab-pane" id="'.$YPE_category->slug.'">';

Info: When i use the same function (But only remove the &$item_output argument and replace $item_output variable to echo) it is work and add active class to items and contents without any problem. Means when i use $item_output instead of echo not add active class!

How i can add active class directly during click on items or show contents when i click on items? i think may do this by jQuery but i can't do it?

function YPE_bstab(&$item_output, $item) {
    $YPE_categories = get_terms('category', array(
        'orderby' => 'count',
        'number'  => $item->items_num,
        'order' => 'DESC',
        'hide_empty' => 1
    ));
    $item_output .= '<ul class="nav nav-tabs">';
        foreach ($YPE_categories as $YPE_category) {
            $item_output .= '<li>';
                $item_output .= '<a href="#'.$YPE_category->slug.'" data-toggle="tab">'.$YPE_category->name.'</a>';
            $item_output .= '</li>';
        }
    $item_output .= '</ul>';
    $item_output .= '<div class="tab-content">';
    foreach ($YPE_categories as $YPE_category) {
        $item_output .= '<div class="tab-pane" id="'.$YPE_category->slug.'">';
            $YPE_Query = array('posts_per_page' => $item->items_num,'category_name'  => $YPE_category->slug);
            $YPE_cat_query = new WP_Query($YPE_Query);
            while ($YPE_cat_query->have_posts()) {
                $YPE_cat_query->the_post();
                $item_output .= '<a href="'.get_permalink().'">'.get_the_post_thumbnail(get_the_ID()).'</a>';
                $item_output .= '<p><a href="'.get_permalink().'">'.get_the_title().'</a></p>';
            }
            wp_reset_query();
        $item_output .= '</div>';
    }
    $item_output .= '</div>';
}

Upvotes: 0

Views: 1456

Answers (1)

Shwan Namiq
Shwan Namiq

Reputation: 631

Use javascript code it is better way to show active class

First: remove data-toggle="tab".

Second: ad this id to li in this line $item_output .= '<li>'; like this $item_output .= '<li id="myTabs">';

Third: add this javascript code under your code or in anu js file within your theme or script.

$('#myTabs a').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
})

Upvotes: 2

Related Questions