How to show a hierarchical terms list in tabs - wordpress

Question

I'm trying to display a list of taxonomy terms in bootstrap tabs.
Listing the terms as below, but need some help to assign into the tabs.
Using #dipmala 's guide, I came upto following. But still can't figure out a method to separate child terms into relevant tabs. Currently the issue is all inside the foreach loop.
<?php $sup_terms = get_terms("supplier_categoties", array("orderby" => "slug", "parent" => 0, "hide_empty" => false)); ?>
<ul class="nav nav-tabs sup_cats" role="tablist">
<?php foreach($sup_terms as $key => $sup_term) : ?>
<li role="presentation">
<?php echo $sup_term->name; ?>
</li>
<script type="text/javascript">
jQuery(".sup_cats li:first").addClass("active");
</script>
<?php
$sup_c_terms = get_terms("supplier_categoties", array("orderby" => "slug", "parent" => $sup_term->term_id, "hide_empty" => false));
if($sup_c_terms) :
foreach($sup_c_terms as $key => $sup_c_term) :
$tabcontent .='<div role="tabpanel" class="tab-pane" id="'.$sup_term->slug.'">';
$tabcontent .= $sup_c_term->name;
$tabcontent .='</div>';
endforeach;
endif;
endforeach;
?></ul>
<div class="tab-content sup_cats_inner">
<div role="tabpanel" class="tab-pane" id="<?php $sup_term->slug ?>">
<?php echo $tabcontent; ?>
<script type="text/javascript">
jQuery('.sup_cats_inner > :first-child').addClass("active");
</script>

Answer 1

Following code will helpful.
<?php $sup_terms = get_terms("supplier_categoties", array("orderby" => "slug", "parent" => 0, "hide_empty" => false)); ?>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<?php foreach($sup_terms as $key => $sup_term) : ?>
<li role="presentation" class="active"><?php echo $sup_term->name; ?></li>
<?php
$tabcontent .=' <div role="tabpanel" class="tab-pane active" id="'.$sup_term->slug.'">...</div>'; // dynamic tab content
endforeach; ?> </ul>
<!-- Tab panes -->
<div class="tab-content">
<?php echo $tabcontent; ?>
</div>