I'm having trouble only displaying my content within one section of my nav bar at a time. Currently, as you can see it's showing the active content clothing1
nicely but when I click clothing2
I want clothing1
to be hidden and the content of clothing2
is shown, and so on.
I don't want the content to stack on top of itself if that makes sense.
document.getElementById('nav_clothing').addEventListener('click', function(){
var secClothing = document.getElementById('sec-clothing');
if( getComputedStyle(secClothing,null).display=='none') secClothing.style.display='block';
else secClothing.style.display='none';
}, false);
<!-- start of list content -->
<ul class="navigation-bar navigation-bar-left">
<li class="active"><a href="#clothing" id="nav_clothing" data-toggle="tab" class="class2">clothing 1</a></li>
<li><a href="#clothing2" id="nav_clothing2" class="class2">clothing 2</a></li>
<li><a href="#clothing3" id="nav_clothing3" data-toggle="tab" class="class2">clothing 3</a></li>
<li><a href="#clothing4" id="nav_clothing4" data-toggle="tab" class="class2">clothing 4</a></li>
<li><a href="#clothing5" id="nav_clothing5" data-toggle="tab" class="class2">clothing 5</a></li>
</ul>
<!-- end of list content -->
<!-- content when list expands -->
<section id="sec-clothing">
<div class="grid-item">
<h2>Test content </h2>
</div>
<div class="grid-item">
<img src="test.svg" class="headerbarcode" id="headerbarcode" alt="test image 1">
</div>
<div class="grid-item">
<img src="test2.svg" class="headertext" id="headertext" alt="test image 2">
</div>
</section>
<!-- end of content when list expands -->