[SOLUCIONADO] Mostrar y ocultar textos con botón

[ceaped]

Buenos días
Tengo varios párrafos de texto y deseo abrir cada uno no que se abran todos.
Este es el código:

Código Javascript:

$(document).ready(function(){ 
  
    $('.alternar-texto').toggle( 
  
        function(e){ 
            $('.texto').slideDown();
            $(this).text('Ocultar texto');
            e.preventDefault();
        }, // Separamos las dos funciones con una coma
      
        function(e){ 
            $('.texto').slideUp();
            $(this).text('Ver texto');
            e.preventDefault();
        }
  
    );
  
});
 

Código HTML:

<a href="#" class="alternar-texto">
Ver texto 1</a>
 
<div class="texto">Texto 1...</div>
 
<a href="#" class="alternar-texto">
Ver texto 2</a>
 
<div class="texto">Texto 2...</div>
 

Que sucede?, cuando doy clic al botón "ver texto 1" se abre también el "texto 2" y yo deseo que se abran por separado.

¿Cómo hago esto?

Gracias por su ayuda

[Triby]

Lo primero es que cada enlace y texto que deseas mostrar estén dentro de un mismo contenedor.

Código HTML:

<div>
    <a href="#" class="alternar-texto">
    Ver texto 1</a>
     
    <div class="texto">Texto 1...</div>
</div>
<div>
    <a href="#" class="alternar-texto">
    Ver texto 2</a>
     
    <div class="texto">Texto 2...</div>
</div>
 

De esta forma, puedes acceder al "padre" usando .closest() y, a partir de ahí, buscar el texto a mostrar.

Lo adecuado es asignar evento "click" a cada enlace y dentro:
- $(this) hace referencia al enlace que recibió el clic
- .closest('div') recorre el DOM hacia arriba hasta encontrar el contenedor padre
- find('.texto') busca en el padre el elemento con clase "texto"
- toggle() es la función de jQuery para mostrar y ocultar un elemento

Código Javascript:

$(document).ready(function() {
    $('.alternar-texto').on('click', function(e) {
          $(this).closest('div').find('.texto').toggle();
    });
});
 

[ceaped]

Hola Triby
Excelente tu explicación

Así quedo el código:

Código Javascript:

$(document).ready(function(){ 
  
    $('.alternar-texto').toggle( 
  
        function(e){ 
        $(this).closest('div').find('.texto').slideDown();
            $(this).text('Ocultar texto');
            e.preventDefault();
        }, 
      
        function(e){ 
        $(this).closest('div').find('.texto').slideUp();
            $(this).text('Ver texto');
            e.preventDefault();
        }
  
    );
  
});
 

Gracias por tu ayuda

[Alexis88]

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:

$(".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:

document.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:

*{
    transition: .3s;
}
 
.slideDown{
    opacity: 1;
}
 
.slideUp{
    opacity: 0;
}
 
.show{
    display: auto;
}
 
.hide{
    display: none;
}
 

DEMO

[ceaped]

Gracias por tu explicación Alexis88.