I have a list of navigation items where when one is clicked it's status becomes active
$(document).ready(function() {
$('li').click(function() {
$('li').removeClass('active');
$(this).addClass('active');
});
});
I have a container div with multiple hidden divs inside and based on the order of the li that is active I want to be able to show the hidden div that is the same order as the li.
<div class="col-md-9">
<div id="item1">
<p>Section#1</p>
<img src="image-plugin.jpg" class="img-responsive">
</div>
<div id="item2">
<p>Section#2</p>
<img src="image-plugin.jpg" class="img-responsive">
</div>
<div id="item3">
<p>Section#3</p>
<img src="image-plugin.jpg" class="img-responsive">
</div>
</div>
So basically if the second li has the active class then I can have the second of the hidden divs be visible.
Ideally a solution that doesn't involve attaching id's to the li's would be best but I've been having trouble achieving this and would appreciate any help possible.