Hide and show div using href

Asked

Viewed 319 times

0

Would you like to know how to hide and show div using href? For example, I have a Title called "Filter" when clicking on the button next to it, I want you to show the elements that are inside it and when you click again I want you 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

  • You can show your HTML structure?

  • <div class="widget Boxed"> <div class="widget-head"> <H4 class="pull-left"> <i class="icon-reorder"></i>Filters </H4> <div id="filter"class="widget-icons pull-right"> <a href="#" class="wminimize"><i class="fa-Angle-double-down"></i> </a> <!-- hide here--> </div> <div class="clearfix"></div> </div> <div class="widget-content" style="display: None;"><! --to hide this -->

  • Diego, I put the comments HTML in the question, I still don’t understand which part should be hidden when pressing where. You can click on [Edit] and explain better?

  • I can’t put the whole code in it’s too big.

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 must call the function within the Title: onclick="myFunction()"

0


Your href will look like this: 

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

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

First you check the current state ( if it’s in your interest you can’t just hide or show directly ) and store 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 it a nicer tone you can use jQuery with the Hide() and show() function or simply work with Transition in your css. I hope I helped! until next time.

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.