Javascript: Give .hide on everything that is open

Navigation
4

Good afternoon. I would like to know how to do it instead of writing: 

  $("#removemirror3").click(function(){
  $("#mirror31").hide("slow");
  $("#mirror32").hide("slow");
  $("#mirror33").hide("slow");
  $("#add4mirror").hide("slow");

Write a general hide that hides everything that is open. Hugs.

    
asked by anonymous 05.03.2015 / 18:18

3 answers

5

@Guilherme, for this you need a common element among all the mirror. For example look at the HTML below:

HTML 

<div id="mirror30" data-mirror class="hidden" ></div>
<div id="mirror31" data-mirror ></div>
<div id="mirror32" data-mirror ></div>
<div id="mirror33" data-mirror ></div>
<div id="mirror34" data-mirror class="hidden" ></div>
<div id="add4mirror" data-mirror ></div>

CSS 

.hidden { display: none; }

In the above case, all mirrors have the data-mirror property, so you can use it to select all of them.

As you only need the visible ones, you can apply a filter :visible 

$("[data-mirror]:visible").hide("slow");


var btHidden = $("#btHidden");
btHidden.click(function () {
  var visibleMirror = $("[data-mirror]:visible");
  visibleMirror.hide("slow");
});
.hidden { display: none; }

.container {
  height: 120px;
}

.mirror {
  float: left;
  background-color: whitesmoke;
  width: 100px;
  height: 100px;
  box-shadow: 0px 0px 10px black;
  margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="container">
  <div id="mirror30" data-mirror class="mirror hidden" ></div>
  <div id="mirror31" data-mirror class="mirror" ></div>
  <div id="mirror32" data-mirror class="mirror" ></div>
  <div id="mirror33" data-mirror class="mirror" ></div>
  <div id="mirror34" data-mirror class="mirror hidden" ></div>
  <div id="add4mirror" data-mirror class="mirror" ></div>
</div>
<button id="btHidden" >Esconder Tudo</button>
    
05.03.2015 / 19:44
5

You can use a context to select the elements and give a .hide ()

Example:

  • Use a common class selection.
  • Search by specific attribute.
  • Use the parent element and use the .find element.

Create a context to improve your selection of elements, then manipulation will be simpler.

    
05.03.2015 / 18:50
3

You can select elements that contain part of id . It is worth mentioning that there are other easier ways to do this manipulation, as mentioned in other replies, but see an example: 

 $("button").click(function(){
     // seleciona todos os elementos que contenham mirror no id
     //$("[id*=mirror]").hide("slow"); 
     
     // seleciona todos os elementos que contenham mirror3 no id
     //$("[id*=mirror3]").hide("slow"); 
   
     // seleciona todos os elementos que contenham mirror3 no id, exceto botão
     $("[id*=mirror3]:not(button)").hide("slow"); 
   
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="mirror31">#mirror31</div>
<div id="mirror32">#mirror32</div>
<div id="mirror33">#mirror33</div>
<div id="add4mirror">add4mirror</div>
<button type="button" id="removemirror3">Remove</button>
    
05.03.2015 / 19:47
How to get the last days of the month in PHP How to check if a response (date) is a json