JavaScript - MOSTRAR OCULTAR ELEMENTOS

Buenas a todos

Antes de nada decir que no tengo casi nada de idea sobre JavaScript

Tengo un problema que no se solucionar.

Tengo un HTML con varias listas y un código Script que me despliega las listas.

Necesito que cuando vuelva a hacer clic en una nueva lista, la que se ha desplegado anteriormente deje de mostrase para que no se alargue la página.

CÓDIGO

<nav class="menu">

<ul>


<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>
<li><a href="#"></a>1.4.</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>
<li><a href="#"></a>3.3.</li>
<li><a href="#"></a>4.4.</li>
</ul>
</li>

<li class="opcion"><a href="#">OPCION 3.</a>
<ul id="ul" class="submenu">
<li><a href="#"></a>3.1.</li>
<li><a href="#"></a>3.2.</li>
<li><a href="#"></a>3.3.</li>
<li><a href="#"></a>3.4.</li>
</ul>
</li>

<li class="opcion"><a href="#">OPCION 4.</a>
<ul id="ul" class="submenu">
<li><a href="#"></a>4.1.</li>
<li><a href="#"></a>4.2.</li>
<li><a href="#"></a>4.3.</li>
<li><a href="#"></a>4.4.</li>
</ul>
</li>

</ul>

SCRIPT (al hacer clic agrega a ul class submenu la clase activo para que con css tenga 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');
}


)

})

Alguna solución???

Muchas gracias a todos

Hola buenas mejor utiliza select aquí tienes una pagina con ejemplos que se pueden cambiar para que pruebes:
https://www.w3schools.com/tags/tag_select.asp