Toggle CSS Classes

Question

Now I come with another question because I’m a beginner in javascript.

Well, I have this function that when clicking on the registered tasks tab appears a div with a select(combobox).

As I do for when I click on received tasks the div disappears again. It only disappears when I click again on registered tasks.

It may be quite basic but I’m still crawling on js.

Anyone who can help, thank you.

window.onload = function(){
var div = document.querySelector('div#minhaDiv');
var section = document.querySelector('section#secao');

section.addEventListener('click', function() {
    var aberto = div.classList.contains('teste');
    div.classList.toggle('teste2');
});
}

.teste {
    display: none;
}

.teste2 {
    display: block;
}

<div class="teste" id="minhaDiv">
    Filtro busca2:
    <select name="" onchange="" id="">
        <option value="0">...</option>
        <option value="1">Prazo decrescente</option>
        <option value="2">Prazo crescente</option>
        <option value="3">Título A - Z</option>
        <option value="4">Título Z - A</option>
    </select>
</div>

<section id="" onclick="">
    <p class="title" data-section-title>
        <a href="#">Tarefas Realizadas</a>
    </p>
    <div class="content" data-section-content>
        <table class="responsive" width="100%">
            <thead>
                <tr>
                    <th width="15%">A Tarefa</th>
                    <th width="15%">Funcionário</th>
                    <th width="15%">Setor</th>
                    <th width="5%">Status</th>
                    <th width="10%" style="text-align:center;">Prazo</th>
                    <th width="10%">Nível Urgência</th>
                    <th width="10%">Dia Fechamento</th>
                    <th width="7%" style="text-align:center;">Editar</th>
                    <th width="7%" style="text-align:center;">Excluir</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</section>
<section id="secao" onclick="">
    <p class="title" data-section-title>
        <a href="#">Tarefas Cadastradas</a>
    </p>
    <div class="content" data-section-content>
        <table class="responsive" width="100%">
            <thead>
                <tr>
                    <th width="15%">A Tarefa</th>
                    <th width="15%">Funcionário</th>
                    <th width="15%">Setor</th>
                    <th width="5%">Status</th>
                    <th width="10%" style="text-align:center;">Prazo</th>
                    <th width="10%">Nível Urgência</th>
                    <th width="10%">Dia Fechamento</th>
                    <th width="7%" style="text-align:center;">Editar</th>
                    <th width="7%" style="text-align:center;">Excluir</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</section>

Answer 1

Good afternoon Lucas, below a way to disappear with the DIV when clicking on Completed Tasks, is basically the same code, the toggle method is given as true/false parameter to display or not.

window.onload = function(){
  var div = document.querySelector('div#minhaDiv');

  var secao = document.querySelector('section#secao');
  var title = document.querySelector('section#secTitle');

  secao.addEventListener('click', function() {
      div.classList.toggle('teste2', true);
      div.classList.toggle('teste', false);
  });

  title.addEventListener('click', function() {
      div.classList.toggle('teste2', false);
      div.classList.toggle('teste', true);
  });
}

.teste {
    display: none;
}

.teste2 {
    display: block;
}

<div class="teste" id="minhaDiv">
    Filtro busca2:
    <select name="" onchange="" id="">
        <option value="0">...</option>
        <option value="1">Prazo decrescente</option>
        <option value="2">Prazo crescente</option>
        <option value="3">Título A - Z</option>
        <option value="4">Título Z - A</option>
    </select>
</div>

<section id="secTitle" onclick="">
    <p class="title" data-section-title>
        <a href="#">Tarefas Realizadas</a>
    </p>
    <div class="content" data-section-content>
        <table class="responsive" width="100%">
            <thead>
                <tr>
                    <th width="15%">A Tarefa</th>
                    <th width="15%">Funcionário</th>
                    <th width="15%">Setor</th>
                    <th width="5%">Status</th>
                    <th width="10%" style="text-align:center;">Prazo</th>
                    <th width="10%">Nível Urgência</th>
                    <th width="10%">Dia Fechamento</th>
                    <th width="7%" style="text-align:center;">Editar</th>
                    <th width="7%" style="text-align:center;">Excluir</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</section>

<section id="secao" onclick="">
    <p class="title" data-section-title>
        <a href="#">Tarefas Cadastradas</a>
    </p>
    <div class="content" data-section-content>
        <table class="responsive" width="100%">
            <thead>
                <tr>
                    <th width="15%">A Tarefa</th>
                    <th width="15%">Funcionário</th>
                    <th width="15%">Setor</th>
                    <th width="5%">Status</th>
                    <th width="10%" style="text-align:center;">Prazo</th>
                    <th width="10%">Nível Urgência</th>
                    <th width="10%">Dia Fechamento</th>
                    <th width="7%" style="text-align:center;">Editar</th>
                    <th width="7%" style="text-align:center;">Excluir</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</section>