Ver Mensaje Individual
  #4 (permalink)  
Antiguo 28/10/2020, 11:16
Avatar de Alexis88
Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 13 años, 1 mes
Puntos: 977
Respuesta: Mostrar y ocultar textos con botón

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
  1. $(".alternar-texto").on("click", function(){
  2.     $(this).next().toggle();
  3. });

DEMO

Esto, con Vanilla JavaScript (sin jQuery ni ninguna otra librería), sería así:

Código Javascript:
Ver original
  1. document.addEventListener("click", function(e){
  2.     e.target.className == "alternar-texto" && (function($this){
  3.         let $next = $this.nextElementSibling;
  4.         if ($next.classList.contains("slideUp")){            
  5.             $next.classList.remove("hide");
  6.             $next.classList.add("show");            
  7.             setTimeout(function(){
  8.                 $next.classList.remove("slideUp");
  9.                 $next.classList.add("slideDown");
  10.             }, 100);
  11.         }
  12.         else{
  13.             $next.classList.remove("slideDown");
  14.             $next.classList.remove("show");
  15.             $next.classList.add("slideUp");
  16.             setTimeout(function(){
  17.                 $next.classList.add("hide");
  18.             }, 300);
  19.         }
  20.     })(e.target);
  21. }, false);

Lo anterior requiere complementarse con estos estilos:

Código CSS:
Ver original
  1. *{
  2.     transition: .3s;
  3. }
  4.  
  5. .slideDown{
  6.     opacity: 1;
  7. }
  8.  
  9. .slideUp{
  10.     opacity: 0;
  11. }
  12.  
  13. .show{
  14.     display: auto;
  15. }
  16.  
  17. .hide{
  18.     display: none;
  19. }

DEMO

__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Última edición por Alexis88; 28/10/2020 a las 11:25 Razón: Versión vanilla