Como mostrar e ocultar vários elementos em um seletor jQuery?

Eu quero mostrar o elemento oculto com ID hidden_element quando clico no elemento com a class show_hidden_element e fecho o elemento com o ID hidden_element quando hidden_element em elemento com ID close_hidden_element , se eu fizer apenas um meu script pode funcionar bem, mas eu tenho três elementos com a mesma CLASSE e ID, não pode funcionar, alguém por favor ajude.

este é meu roteiro

  

Lorem Ipsum

×

Lorem Ipsum

×

Lorem Ipsum

×

meu script jQuery é

  $(this).find(".show_hidden_element").click( function(){ $(this).find("#hidden_element").show(); }); $(this).find("#close_hidden_element").click( function(){ $(this).find("#hidden_element").hide(); }); 

A diferença entre o id e a class é que o id é único, a class não é. Além disso, um elemento pode ter várias classs, mas um ID exclusivo.

use class="close_hidden_element button_close" .

 

Lorem Ipsum

×

Lorem Ipsum

×

Lorem Ipsum

×

E sua jquery deveria ser.

 $(document).on('click', 'div.show_hidden_element',function(){ $(".hidden_element").show(); }); $(document).on('click', 'div.close_hidden_element',function(){ $(".hidden_element").hide(); }); 

Conselho : leia este http://css-tricks.com/the-difference-between-id-and-class/

Elementos em uma página devem ter IDs únicos . Se você quiser que isso funcione, você precisará alterá-los para classs. Você quer que cada um dos

s se esconda / seja exibido apenas por seus respectivos gatilhos?

  

Lorem Ipsum

×

Lorem Ipsum

×

Lorem Ipsum

×

jQuery

 $("article").on("click",".show_hidden_element",function(){ $(this).find(".hidden_element").show(); }); $("article").on("click",".close_hidden_element",function(){ $(this).closest(".hidden_element").hide(); }); 

Na verdade, isso não funciona muito bem devido ao posicionamento da class show_hidden_element . Talvez seja melhor você ter o × sendo uma alternância, como esta:

 

Lorem Ipsum

×
$(function () { $("article").on("click", ".close_hidden_element", function () { $(".hidden_element").toggle(); }); });

Você não pode ter o mesmo ID para vários elementos. Você tem que converter o id em class para todo o id = “hidden_element” (e outros também) e então usar algo como isto.

 

Lorem Ipsum

×

Lorem Ipsum

×

Lorem Ipsum

×

jquery

 $(".show_hidden_element").click( function(){ $(this).find(".hidden_element").show(); }); $(".button_close").click( function(){ $(this).closest(".hidden_element").hide(); });