0

Gostaria de saber como ocultar e mostrar div utilizando href? Por exemplo, tenho um Titulo chamado "Filtro" ao clica no botão ao lado dele, quero que mostre os elementos que estão dentro dele e ao clicar novamente quero que oculte os elementos.

<div class="widget boxed">
  <div class="widget-head">
    <h4 class="pull-left">
      <i class="icon-reorder"></i>Filtros
    </h4>
    <div id="filtro" class="widget-icons pull-right">
      <a href="#" class="wminimize"><i class="fa-angle-double-down"></i> </a>
      <!-- ocultrar nesse aqui-->
    </div>
    <div class="clearfix"></div>
  </div>
  <div class="widget-content" style="display: none;">
    <!--pra esconder isso -->
4
  • Podes mostrar a estrutura do teu HTML?
    – Sergio
    4/06/2017 às 13:35
  • <div class="widget boxed"> <div class="widget-head"> <h4 class="pull-left"> <i class="icon-reorder"></i>Filtros </h4> <div id="filtro"class="widget-icons pull-right"> <a href="#" class="wminimize"><i class="fa-angle-double-down"></i> </a> <!-- ocultrar nesse aqui--> </div> <div class="clearfix"></div> </div> <div class="widget-content" style="display: none;"><!--pra esconder isso --> 4/06/2017 às 14:00
  • Diego, coloquei o HTML dos comentários na pergunta, ainda não percebi qual a parte que deve ser escondida ao carregar onde. Podes clicar em editar e explicar melhor?
    – Sergio
    4/06/2017 às 14:36
  • Não consigo colocar o codigo todo é muito grande. 4/06/2017 às 17:26

2 Respostas 2

0

Seu href vai ficar da seguinte maneira:

<a href="javascript:ocultarMostrarFiltros()" class="wminimize">

Agora você precisa ter a função que faz a mágica :

Primeiro você verifica o estado atual ( caso seja do seu interesse se não pode apenas ocultar ou mostrar diretamente ) e armazena em uma variável.

function ocultarMostrarFiltros(){
    var visivel = document.getElementsByClassName("example").style.display;
    var element = document.getElementsByClassName("example");
    if(visivel == 'none'){
        element.style.display = 'block';
    }else{
        element.style.display = 'none';
    }
}

Se quiser deixar com um tom mais agradável você pode usar o jQuery com a função hide() e show() ou simplesmente trabalhar com transition no seu css. Espero ter ajudado! até a próxima.

0

Pode criar uma função do JavaScript:

<script>
function myFunction() {
    var x = document.getElementById('myDIV');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>

Você deve chamar a função dentro do Título: onclick="myFunction()"

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .