WordPress How do get the content in the tab panel after the click on the sub tab of the parent tab?

I’m working on the WordPress custom page where I have added jquery ul tabs in the custom template page.

1) Now how do I get the content in the tab panel after the click on the sub-tabs of the parent tab?

2) The First Tab should be open and active until click on the another parent tab?

3) Problem is that when I added static content tab showing content according to the sub tab id but jquery tab is not showing with dynamic content. No content is showing after the click on the sub-tab dynamically?

Jquery

<script type=”text/javascript”>

window.onload=function(){

$(function() {
$( “#tabs” ).tabs();
});
$(document).ready(function() {
$(“.menu a”).click(function(){
$(“.video”).each(function(){
$(this).get(0).pause();
})
});
//tabbing selection
$(“.menu li:eq(0)”).addClass(“active”);
$(“.menu li”).click(function(){
$(this).addClass(‘active’);
$(this).siblings().removeClass(‘active’);
});

$(“.tabs”).click(function(){
$(“.subtabsinner”).slideUp();
$(this).siblings().removeClass(‘active’);
});
$(“.subtabs”).click(function(){
$(this).nextUntil(“li.parent”).slideToggle();
$(this).removeClass(‘active’);
$(this).next().addClass(‘active’);
});

});

}

</script>

**Html and Php Code**

<div class=”container”>

<div id=”tabs” style=”display: inline-flex;”>

<div class=”row”>

<div class=”col col-lg-3 col-md-3″>

<div class=”leftmenu”>

<div class=”menu”>

<ul class=’resourcepage’>
<?php
$terms = get_terms(‘resourcecategories’);
if ( !empty( $terms ) && !is_wp_error( $terms ) ){

//parent tab name
foreach ( $terms as $term ) {
echo “<li class=’parent subtabs tabsclose’><span>” . $term->name . “</span></li>”;

$music_args = array(
‘post_type’ => ‘resourceverticaltabs’,
‘orderby’ => ‘title’,
‘order’ => ‘ASC’,
‘hierarchical’ => false,
‘resourcecategories’ => $term->name
);

//sub tab name
$musicians = get_posts($music_args);
foreach ($musicians as $musician) {
echo ‘ <li class=”subtabsinner”><a href=”#’.$musician->ID.'”>’.$musician->post_title.'</a></li>’;
}

}

}?>

</ul>
</div>

</div>

</div>

<div class=”col col-lg-8 col-md-8″>

<div class=”rightmenu”>

<?php $musicians = get_posts($music_args); foreach ($musicians as $musician) {?>

<div id=”<?php echo $musician->ID ?>” style=”border:2px solid red”>
<?php echo $musician->the_content ?>

</div>

<?php } ?>
</div>
</div>

</div>
</div>

</div>

Static Content Link
Static Content

Read more here:: WordPress How do get the content in the tab panel after the click on the sub tab of the parent tab?

Leave a Reply

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