Como bien te han indicado, el evento que necesitas asociar a cada enlace es el evento
click
, de tal forma que, cada vez que se pulse uno de los enlaces, se ejecutarán las instrucciones pertinentes. Asimismo, y como también te lo han señalado, el método
.toogle()
es más conveniente para lo que deseas hacer debido a que por sí solo es capaz de ejecutar la funcionalidad de los métodos
.slideUp()
y
.slideDown()
. Por otra parte, te vendría bien seguir el consejo de agrupar los elementos para que, de esta manera, empleando los métodos de búsqueda adecuados, puedas alterar los elementos relativos a cada enlace; sin embargo, dado que cada texto se halla a continuación de cada enlace, puedes recurrir al método
.next()
, que es el equivalente de la propiedad
nextElementSibling
, para tomar al texto adjunto a cada enlace y así aplicarle el método
.toogle()
.
Código Javascript
:
Ver original$(".alternar-texto").on("click", function(){
$(this).next().toggle();
});
DEMO
Esto, con
Vanilla JavaScript (sin jQuery ni ninguna otra librería), sería así:
Código Javascript
:
Ver originaldocument.addEventListener("click", function(e){
e.target.className == "alternar-texto" && (function($this){
let $next = $this.nextElementSibling;
if ($next.classList.contains("slideUp")){
$next.classList.remove("hide");
$next.classList.add("show");
setTimeout(function(){
$next.classList.remove("slideUp");
$next.classList.add("slideDown");
}, 100);
}
else{
$next.classList.remove("slideDown");
$next.classList.remove("show");
$next.classList.add("slideUp");
setTimeout(function(){
$next.classList.add("hide");
}, 300);
}
})(e.target);
}, false);
Lo anterior requiere complementarse con estos estilos:
Código CSS:
Ver original*{
transition: .3s;
}
.slideDown{
opacity: 1;
}
.slideUp{
opacity: 0;
}
.show{
display: auto;
}
.hide{
display: none;
}
DEMO