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

by edgematrix   Last Updated October 11, 2018 15:08 PM

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

https://codepen.io/fdharsihexagon/pen/LgyLGZ

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>
Tags : posts jquery


Related Questions


Full width images within post content

Updated November 05, 2016 09:03 AM

Submit the form#post form via Javascript

Updated July 24, 2016 08:03 AM

Ajax pagination - browse history?

Updated August 15, 2017 09:08 AM

Add sliding effect to ajax post sorting results

Updated October 08, 2017 21:08 PM