Skip to main content
Correção para tratar por classes CSS
Fonte Link
Daniel Mendes
  • 6,2mil
  • 2
  • 12
  • 22
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>
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');
  });

  title.addEventListener('click', function() {
      div.classList.toggle('teste2', false);
  });
}
.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>
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>
Fonte Link
Daniel Mendes
  • 6,2mil
  • 2
  • 12
  • 22

Boa tarde Lucas, abaixo uma forma de desaparecer com a DIV quando clicar em Tarefas Realizadas, é basicamente o mesmo código, o método toggle recebe como parâmetro true/false para exibir ou não.

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');
  });

  title.addEventListener('click', function() {
      div.classList.toggle('teste2', false);
  });
}
.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>