here is the image of the menu i made

i am working to make a psd to wordpress theme conversion, and i need to make a page where all categories, post in each category and content of each post should appear on clicking. I have made it in bootstrap see this fiddle See this fiddle, the menu is working outside the wordpress but in wordpress it is only working for the last category. I couldn’t figure out how to loop through each to generate proper menu. please guide

Here is the wordpress code i am using

<div class="container-fluid">
<div class="row" >
  <div class="col-sm-3" style="background-color:#36474f; height:500px;">
    <ul class="nav nav-pills nav-stacked">
    <?php
        //Retrieve custom taxonomy terms using get_terms and the custom post type.
        $categories = get_terms('category');
        //Iterate through each term
        foreach ( $categories as $category ) {
        ?>
        <li>
            <a href="#<?php echo $category->slug; ?>" data-toggle="pill" onClick="hideDefault('<?php echo $category->slug; ?>')"><?php echo $category->name; ?></a>
        </li>
        <?php } ?>
    </ul>
  </div>
  <div class="col-sm-9" id="wrapper">
    <div class=" row tab-content">
      <div id="<?php echo $category->slug; ?>" class="tab-pane fade" >
      <span class="glyphicon glyphicon-remove close-btn" id="closeTab"></span>
        <div class="col-sm-3" style="background-color:#fafafa; height:500px;">
          <ul class="nav nav-pills nav-stacked">
           <?php
                //Setup the query to retrieve the posts that exist under each term
                $posts = get_posts(array(
                    'post_type' => 'course',
                    'orderby' => 'menu_order',
                    'order' =>  'ASC',
                    'taxonomy' => $category->taxonomy,
                    'term'  => $category->slug,
                    'nopaging' => true,
                    ));
                    // Here's the second, nested foreach loop that cycles through the posts associated with this category
                    foreach($posts as $post) {
                        setup_postdata($post); ?>
                        <li><a href="#<?php echo $post->post_name; ?>" data-toggle="pill"><?php the_title();?></a></li><?php
                            //var_dump($post);
                    }
            ?>
          </ul>
        </div>
        <div class="col-sm-9" style="">
          <div class=" row tab-content">
            <div id="<?php echo $post->post_name; ?>" class="tab-pane fade" style="background-color:#fafafa; height:500px; padding:10px">
                    <?php
                        $fields = get_fields();
                        if( $fields )
                            {
                                foreach( $fields as $field_name => $value )
                                {
                                    // get_field_object( $field_name, $post_id, $options )
                                    // - $value has already been loaded for us, no point to load it again in the get_field_object function
                                    $field = get_field_object($field_name, false, array('load_value' => false));

                                    echo '<div>';
                                        echo '<h3>' . $field['label'] . '</h3>';
                                        echo $value;
                                    echo '</div>';
                                }
                            }?>

                        <?php //endforeach; ?>

                    </li>

                    <?php //endforeach;
                    wp_reset_postdata(); ?>


            </div>
            <div id="<?php echo $post->post_name; ?>" class="tab-pane fade" style="background-color:#fafafa; height:500px; padding:10px">
            <h1 style="margin-top:0">Link 2</h1>
            <p>Lorem Ipsum is simply dummy </p>
            </div>
            <div id="<?php echo $post->post_name; ?>" class="tab-pane fade" style="background-color:#fafafa; height:500px; padding:10px">
            <h1 style="margin-top:0">Link 3</h1>
            <p>Lorem Ipsum is simply dummy </p>
            </div>
            <div id="<?php echo $post->post_name; ?>" class="tab-pane fade" style="background-color:#fafafa; height:500px; padding:10px">
            <h1 style="margin-top:0">Link 4</h1>
            <p>Lorem Ipsum is simply dummy </p>
            </div>
          </div>
        </div>
      </div>
     <div id="menu1" class="tab-pane fade">
     <span class="glyphicon glyphicon-remove close-btn" id="closeTab"></span>
       <div class="col-sm-3" style="background-color:#999; height:500px;">
          <ul class="nav nav-pills nav-stacked">
            <li><a href="#link5" data-toggle="pill">link 5</a></li>
            <li><a href="#link6" data-toggle="pill">link 6</a></li>
            <li><a href="#link7" data-toggle="pill">link 7</a></li>
            <li><a href="#link8" data-toggle="pill">link 8</a></li>
          </ul>
       </div>

       <div class="col-sm-9" style="">
          <div class=" row tab-content">
            <div id="link5" class="tab-pane fade" style="background-color:#FFC; height:500px; padding:10px">
            <h1 style="margin-top:0">Link 5</h1>
            <p>Lorem Ipsum is simply .</p>
            </div>
            <div id="link6" class="tab-pane fade" style="background-color:#6FF; height:500px; padding:10px">
            <h1 style="margin-top:0">Link 6</h1>
            <p>Lorem Ipsum is simply</p>
            </div>
            <div id="link7" class="tab-pane fade" style="background-color:#9FC; height:500px; padding:10px">
            <h1 style="margin-top:0">Link 7</h1>
            <p>Lorem Ipsum is simply </p>
            </div>
            <div id="link8" class="tab-pane fade" style="background-color:#FCF; height:500px; padding:10px">
            <h1 style="margin-top:0">Link 8</h1>
            <p>Lorem Ipsum is simply </p>
            </div>
          </div>
        </div>

     </div>
  </div>
</div>

But only the last menu item works.
please guide me on how to do it.

Read more here: generating multilevel bootstrap menu in wordpress


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: