Tengo problemas para mostrar mi contenido solo en una sección de mi barra de navegación a la vez. Actualmente, como puede ver, muestra el contenido activo clothing1 muy bien, pero cuando hago clic en clothing2 quiero que clothing1 se oculte y se muestre el contenido de clothing2 , y así sucesivamente.
No quiero que el contenido se acumule encima de sí mismo si eso tiene sentido.
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 -->