[ Foro de Javascript ]

Mostrar/ocultar Elemento

Buenas.

A ver si me podéis ayudar. (no se casi nada de Javascript)

Tengo un html con varias listas.

He insertado un script que me muestra las "sub-listas" vinculadas a estas

Me interesaría que antes de mostrar la listas en la que hago clic, oculte las que he mostrado anteriormente
¿alguien me ilumina?

Gracias

Este ese le código


HTML
          <li  class="opcion"><a href="#">OPCION 1.</a>            
               <ul  id="ul"  class="submenu">
                   <li><a href="#"></a>1.1.</li>
                   <li><a href="#"></a>1.2</li>
                   <li><a href="#"></a>1.3.</li>
               </ul>          
           </li>

           <li class="opcion"><a href="#">OPCION 2</a>            
               <ul  id="ul"  class="submenu">
                   <li><a href="#"></a>2.1</li>
                   <li><a href="#"></a>2.2.</li>
               </ul>          
           </li>


SCRIPT agrega la clase ('activo') con la cual mi CSS           .menu ul .activo{  display: block;}

var menu = document.querySelectorAll('.opcion');

menu.forEach(function(item){
   item.addEventListener('click',function(i){

       var elemento= i.target.parentNode;
       elemento.children[1].classList.toggle('activo');
   }

   )
})