How do i convert jquery static tab into wordpress dynamic post using custom post type?

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

Jsfiddle Link For The Static Content

Jquery WordPress Custom Page

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

Read more here:: How do i convert jquery static tab into wordpress dynamic post using custom post type?

Leave a Reply

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