I need assistance with positioning the div content directly below the li a tag. Is there a way to accomplish this?
$(document).ready(function() {
$('.nav ul li:first').addClass('active');
$('.tab-content:not(:first)').hide();
$('.nav ul li a').click(function(event) {
event.preventDefault();
var content = $(this).attr('href');
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
$(content).show();
$(content).siblings('.tab-content').hide();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12">
<div class=row>
<div class="col-xs-12">
<div class="nav">
<ul>
<li><a href="#a">Option A</a>
</li>
<li><a href="#b">Option B</a>
</li>
<li><a href="#c">Option C</a>
</li>
</ul>
</div>
</div>
<div class="col-xs-12">
<div id="a" class="tab-content">
<h2>Option A</h2>
<p>Option A</p>
</div>
<div id="b" class="tab-content">
<h2>Option B</h2>
<p>Option B</p>
</div>
<div id="c" class="tab-content">
<h2>Option C</h2>
<p>Option C</p>
</div>
</div>
</div>
</div>