Create a Page Templete to Display Table Of Content for Custom Taxonomies

Here is the final code I managed to working out:

<div class="content" role="main">
    <?php $term = get_term_by('slug', get_query_var('term'), get_query_var('taxonomy'));
        echo '<h3 class="tax-title">' . $term->name . '</h3>';
    ?>
    <div id="TableOfContents">
      <div class="ui-boxmenu">
        <ul class="sections">
          <?php
$taxonomyName = "tableofcontent";
$parent_terms = get_terms($taxonomyName, array(
    'parent' => $term->term_id,
    'orderby' => 'menu_order',
    'hide_empty' => false
));

foreach ($parent_terms as $pterm) {
    //Get the Child terms
    $terms = get_terms($taxonomyName, array(
        'parent' => $term->term_id,
        'orderby' => 'menu_order',
        'hide_empty' => false
    ));
    foreach ($terms as $term) {
        echo '<li><a>' . $term->name . '</a>';

        $childs = get_terms($taxonomyName, array(
            'parent' => $term->term_id,
            'orderby' => 'menu_order',
            'hide_empty' => false
        ));
        echo '<ul class="sidenav">';

        foreach ($childs as $child) {
            echo '<li>' . $child->name . '';
                $wpq = array ('taxonomy'=>'tableofcontent','orderby' => 'menu_order','order' => 'ASC','term'=>$child->slug);
                  $myquery = new WP_Query ($wpq);
                  $article_count = $myquery->post_count;
                  if ($article_count) {
                    echo "<ul class=\"items\">";
                    while ($myquery->have_posts()) : $myquery->the_post();
                      echo "<li><a href=\"".get_permalink()."\">".$post->post_title."</a></li>";
                    endwhile;
                    echo "</ul>";
                  } 

            echo '</li>';
        }

        echo '</ul>';


        echo '</li>';
    }
}

?>
        </ul>
      </div>
    </div>
    <script language="javascript">
        $('.ui-boxmenu').boxmenu();
    </script> 
    <script type="text/javascript">
        // Default add class selected to First Item in Box Menu
        jQuery(document).ready(function($) {
            $("ul.sections li:first").addClass("selected");
            $("ul.sections li:first .sidenav li:first").addClass("selected");
            $("ul.sections li:first .sidenav li ul.items").addClass("selected");
            $("ul.sections li:first .sidenav li ul.items li:first").addClass("selected");
        });
    </script>

<?php   
$singleterm = get_term_by('slug', get_query_var('term'), get_query_var('taxonomy'));
    $args = array(
        'post_type'         => 'training',
        'tableofcontent'  => $singleterm->slug,
        'orderby'           => 'menu_order',
        'showposts'         => 1,
        'order' => 'ASC',
    );

    $posts = get_posts( $args );
    foreach ($posts as $post) :  setup_postdata($post); 

?>

<h2 class="content-subhead"><?php the_title() ?></h2>
<?php the_content() ?>

<?php endforeach; wp_reset_postdata(); ?>

  </div>

Regards