Click Section and open DIV

Question

I want to click on Flap Change the class of the div that contains the attribute to show. It is originally with a class that makes it hidden.I have the js function there but it’s not working

Who can help thank you. I hope the post is good

  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');
        this.innerHTML = aberto ? 'teste2' : 'teste';

.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 = "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>

Answer 1

Dude your code is working, but it looks like it’s missing are some tags, and characters in the code... Look there, when you click on Secao appears the select and does the innerHTML straight

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');
    this.innerHTML = aberto ? 'teste2' : 'teste';
})

.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="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>