Question

0

46

Views

Only display one section of content at a time without stacking on itself?

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        -->

7 months ago · Juan Pablo Isaza

Answer question

0

46

Only display one section of content at a time without stacking on itself?

Find remote jobs