Buen día a todos por aquí. Ando buscando una solución para este problema. Tengo un acordeón con 4 apartados, en el último tengo información de archivos en donde solo despliego los nombres, pero quiero que al darle click al nombre me despliegue la descripción y otros datos. Esto es lo que he hecho pero no me funciona lo que quiero hacer en el último apartado, en lo demás todo bien.
$(document).ready(function(){
$(".articulos h3:first").addClass("active");
$(".articulos p:first(:first)").hide();
$(".articulos p:not(:first)").hide();
$(".articulos dl:first(:first)").hide();
$(".articulos dd:first(:first)").hide();
$(".articulos h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
$(".articulos h2").click(function(){
$(this).next("dl").slideToggle("slow")
.siblings("dl:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h2").removeClass("active");
});
$(".articulos dt").click(function(){
$(this).next("dd").slideToggle("slow")
.siblings("dd:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("dt").removeClass("active");
});
});
Los nombres de los aparatados los tengo en h3 a excepción del último que lo tengo en un h2, los elementos del h3 están entre <p> y </p> y los del h2 entre <dl> y </dl>
Les agradezco mucho si me pueden ayudar con esto pues ya llevo 2 días atorado
: