jquery show ocultar cada div onclick

Tengo un número dynamic de divs que se generan a través de asp.net. Necesito mostrar cada contenido div haciendo clic en su encabezado. He intentado esto

$(function () { var myHead = $(".toggle-container").find(".toggle-header"); var myBody = $(myHead).parent().find(".toggle-content"); $(myHead).click(function () { if ($(myBody).css('display') === 'none') { $(this).children('i').removeClass('icon-chevron-sign-down').addClass('icon-chevron-sign-up'); $(this).parent().find(".toggle-content").slideDown("slow"); } else if ($(myBody).css('display') === 'block') { $(this).children('i').removeClass('icon-chevron-sign-up').addClass('icon-chevron-sign-down'); $(this).parent().find(".toggle-content").slideUp("slow"); }; }); }); 

Pero funciona solo para el primer encabezado y el rest de los encabezados no se colapsan en su contenido secundario. Aquí está el enlace JsFiddle lo que he intentado hasta ahora. ¿Alguien puede dar una solución?

El problema era cómo estaba encontrando / ocultando el contenido. var myBody = $(myHead).parent().find(".toggle-content"); encontrar el contenido relacionado con el encabezado en el que hizo clic: el código var myBody = $(myHead).parent().find(".toggle-content"); debe ir dentro del controlador de clic como var myBody = $(this).next()

  $(function () { var myHead = $(".toggle-container .toggle-header"); $(myHead).click(function () { var myBody = $(this).next() if ($(myBody).css('display') === 'none') { $(this).children('i').removeClass('icon-chevron-sign-down').addClass('icon-chevron-sign-up'); $(this).parent().find(".toggle-content").slideDown("slow"); } else if ($(myBody).css('display') === 'block') { $(this).children('i').removeClass('icon-chevron-sign-up').addClass('icon-chevron-sign-down'); $(this).parent().find(".toggle-content").slideUp("slow"); }; }); }); 

Demostración: Violín

Nota: las flechas hacia arriba o hacia abajo aún no funcionan, ya que debe usar find() lugar de children()

Pero se puede simplificar como

 jQuery(function ($) { var $heads = $(".toggle-container .toggle-header"); $heads.click(function () { var $this = $(this); $this.find('i').toggleClass('icon-chevron-sign-down icon-chevron-sign-up'); $this.next().slideToggle("slow"); }); }); 

Demostración: Violín

Lo de abajo funcionaría.

En su código original, asignó un valor a la variable myBody en el momento de la carga. Como hay muchos de estos elementos, solo se usó el primero.

Ahora he movido la configuración de valor para que la variable myBody esté dentro del evento click y use $(this) . Esto asegurará que siempre encuentre el elemento en relación con el elemento actual en el que se hizo clic.

  $(function () { var myHead = $(".toggle-container").find(".toggle-header"); $(myHead).click(function () { var myBody = $(this).parent().find(".toggle-content"); //console.log('yes'); if ($(myBody).css('display') === 'none') { $(this).children('i').removeClass('icon-chevron-sign-down').addClass('icon-chevron-sign-up'); $(this).parent().find(".toggle-content").slideDown("slow"); } else if ($(myBody).css('display') === 'block') { $(this).children('i').removeClass('icon-chevron-sign-up').addClass('icon-chevron-sign-down'); $(this).parent().find(".toggle-content").slideUp("slow"); }; }); }); 

Fiddle Demo