¿Cómo mostrar y ocultar múltiples elementos en un selector jQuery?

quiero mostrar el elemento oculto con ID hidden_element cuando hidden_element clic en el elemento con la clase show_hidden_element , y cierro el elemento con ID hidden_element cuando hidden_element clic en el elemento con ID close_hidden_element , si solo hago uno, mi script puede funcionar bien, pero tengo tres elementos Con la misma CLASE e ID, no puede funcionar, alguien por favor ayuda

este es mi guion

  

Lorem Ipsum

×

Lorem Ipsum

×

Lorem Ipsum

×

mi jQuery Script es

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

La diferencia entre id y class es que id es único, class no. También un elemento puede tener varias clases, pero una identificación única.

use class="close_hidden_element button_close" .

 

Lorem Ipsum

×

Lorem Ipsum

×

Lorem Ipsum

×

Y tu jQuery debería ser.

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

Consejo : lea este http://css-tricks.com/the-difference-between-id-and-class/

Los elementos en una página deben tener IDs ÚNICOS . Si quieres que esto funcione, deberás cambiarlos a clases. ¿Desea que cada uno de los

oculte / muestre solo por sus respectivos disparadores?

  

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(); }); 

En realidad, esto no funciona del todo bien debido a la ubicación de la clase show_hidden_element . Es mejor que tenga × siendo un conmutador, como este:

 

Lorem Ipsum

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

No puede tener la misma ID para varios elementos. Tienes que convertir el ID en clase para todos los id = “hidden_element” (y otros también) y luego usar algo como esto.

 

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(); });