Como esconder uma div com toggle quando clicado em outra que também contém toggle

Front-end
#1
<?php include('inc/head.php');?> <?php include('inc/topo.php');?> 
    <div id="nav">

        <ul>

            <li class="list_return" onclick="insert(1)">SECRETARIAS</li>

            <!-- <li>HOME</li> -->

            <li>SECRETARIA DE<br> EDUCAÇÃO</li>

            <li>SECRETARIA DE<br> SERVIÇOS</li>

            <li>SECRETARIA DE<br> FINANÇAS</li>

            <li>SECRETARIA DE<br> CULTURA</li>

            <li class="list_return_dois" onclick="insertTwo(2)">DEPARTAMENTO DE<br> SERVIÇOS</li>

            <li>DEPARTAMENTO DE<br> CULTURA</li>

        </ul>

    </div>

<div id="retorna">

   <div id="sub-nav">

        <ul>

            <li>PLANEJAMENTO</li>

            <li>SERVIÇOS</li>

            <li>FORMULÁRIO</li>

            <li>PROTOCOLO</li>

            <li>MEIO AMBIENTE</li>

        </ul>

    </div>

</div>

<div id="retorna_dois">

   <div id="sub-nav" class="ocultadois">

        <ul>

            <li>MULTA DE TRÂNSITO</li>

            <li>MULTA DE TRÂNSITO</li>

            <li>MULTA DE TRÂNSITO</li>

        </ul>

    </div>

</div>
<?php include('inc/footer.php');?>

let insere = document.querySelector(‘li.list_return’);

let insereDois = document.querySelector(‘li.list_return_dois’);

let retorna = document.querySelector(’#retorna’);

let nav = document.querySelector(’#nav’);

let retornaDois = document.querySelector(’#retorna_dois’);

let list = document.querySelector(’#nav ul’);

function insert() {

retorna.classList.toggle('ativa');

nav.classList.toggle('nav_ativo');

list.classList.toggle('nav_list');

}

function insertTwo() {

retornaDois.classList.toggle('ativa_dois')

nav.classList.toggle('nav_ativo');

list.classList.toggle('nav_list');

}

  • {

    margin: 0;

    padding: 0;

}

body {

font-family: 'Roboto', sans-serif;

}

#nav {

display: flex;

/* background-color: red; */

/* padding: 5px 0; */

width: 100%;

justify-content: center;

/* align-items: center; */

border-right: 2px solid #00518936;

}

#retorna {

display: flex; 

/* background-color: red; */

/* padding: 5px 0; */

}

#nav ul, #sub-nav ul {

display: flex;

justify-content: center;

width: 100%;

flex-wrap: wrap;

}

#nav ul li, #sub-nav ul li {

background-color: rgb(0 81 137);

width: 330px;

height: 154px;

list-style: none;

display: flex;

justify-content: center;

align-items: center;

color: #f1f1f1;

border-radius: 10px;

cursor: pointer;

letter-spacing: 2px;

transition: all 0.3s;

margin: 20px 20px;

line-height: 30px;

}

#sub-nav ul li {

background-color: #42b4e4;

color:  #f6f6f6;

font-weight: bold;

}

#nav ul li:hover, #sub-nav ul li:hover {

/* transform: scale(1.1); */

background-color: rgb(66 180 228);

}

#sub-nav ul li:hover {

background-color:#005189;

}

.top {

padding: 10px 40px;

border-bottom: 5px solid #005189;

margin-bottom: 20px;

}

.ativa {

/* background-color: rgb(66 180 228); */

display: block !important;

animation-duration: 0.3s;

animation-name: ative;

width: 100%;

}

@keyframes ative {

0% {

    width: 0%;

    opacity: 0;

} 50% {

    width: 50%;

    opacity: 0;

} 100% {

    width: 100%;

    opacity: 1;

}

}

.ativa_dois {

/* background-color: rgb(66 180 228); */

display: block !important;

animation-duration: 0.3s;

animation-name: ative_two;

width: 100%;

}

@keyframes ative_two {

0% {

    width: 0%;

    opacity: 0;

} 50% {

    width: 50%;

    opacity: 0;

} 100% {

    width: 100%;

    opacity: 1;

}

}

#retorna, #retorna_dois {

display: none;

}

section {

display: flex;

}

.nav_ativo {

width: 35% !important;

}

.nav_list {

width: 272px !important;

/* height: 120px !important; */

}

#2

Campeão boa tarde, utiliza uma classe só nos toggle que precisa abrir e fechar ao mesmo tempo.

Por exemplo: 3 divs, uma dentro da outra.
Utilize a mesma classe nas 3 para chamar 1 toogle só.

Caso queira uma de cada vez, lembre-se que a Div Pai sempre tem preferência.

Por exemplo:

Toogle na div 1 enquanto todas estao abertas, fecharão todas.

#3

Obrigado amigo, consegui com classList.contains() em uma comparação lógica.