show content of particular tab as its children - html

Question

I have a list of tabs which can be a category. The content for that specific tab or category should be shown just near and a bit bottom on its respective tab so that it gives a look of parent and children.
Here is how i have done
<div id="teams" class="tabbable tabs-left">
<div class="container">
<div class="row">
<nav class="nav flex-column col-md-1 teamTab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" href="#category1-tab" data-toggle="pill" role="tab">Category1</a>
<a class="nav-link" href="#category2-tab" data-toggle="pill" role="tab">Category2</a>
<a class="nav-link" href="#category3-tab" data-toggle="pill" role="tab">Category3</a>
</nav>
<div class="tab-content col-md-11">
<div class="tab-pane active" id="category1-tab" style="padding-left: 60px; padding-right:100px">
<h5 class="card-title">Name</h5>
<p class="card-title">position</p>
</div>
<div class="tab-pane" id="category2-tab">
<h5 class="card-title">Category 2 Name</h5>
<p class="card-title">position</p>
</div>
<div class="tab-pane" id="category3-tab">
<h5 class="card-title">Category 3 Name</h5>
<p class="card-title">position</p>
</div>
</div>
</div>
</div>
</div>
currently, the content for all tabs is shown at the same place. However, i wanted the content to be shown just beside(with a little bit in bottom position) its respective tab.
--Category 1
name position
Category 2
category 2 name position if clicked this one show in this
position
Category3
similarly if clicked here should be shown its related content
here not on the top

Answer 1

Please try this solution:
Add .child class to all your content DIVs having class .tab-pane and remove inline styles.
.child {
padding-left: 60px;
padding-right:100px
}
Then use this JS code to show Tab content below the Tab title.
$(document).ready(function() {
$('.nav-link').each(function(){
var content_id = $(this).attr('href');
$(this).after($(content_id).hide());
if($(this).hasClass('active')) {
$(content_id).show();
}
});
$('.nav-link').on('click', function(){
var content_id = $(this).attr('href');
$('.tab-pane').hide();
$(content_id).show();
});
});
Hope it will work for you. OR check working code here