Hide and show div using href

Question

Hide and show div using href

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I would like to know how to hide and show div using href? For example, I have a Title called "Filter" by clicking the button next to it, I want it to show the elements that are inside it and when I click again I want it to hide the elements.

<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 -->

javascript html

asked by anonymous 04.06.2017 / 15:24

2 answers

0

You can create a JavaScript function:

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

You should call the function inside the Title: onclick="myFunction()"

04.06.2017 / 16:01

Electronic distribution in PHP without exceeding the limit of electrons How to change the image according to a variable coming from the bank?

score 0 · Accepted Answer

Your href will look like this:

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

Now you need to have the function that does the magic:

First you check the current state (if it is in your interest if you can not just hide or show it directly) and store it in a variable.

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

If you want to leave a more pleasant tone, you can use jQuery with the hide () and show () function or simply work with transition in your css. Hope this helps! until the next.