Ver Mensaje Individual
  #2 (permalink)  
Antiguo 28/10/2020, 09:57
Avatar de Triby
Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 10.106
Antigüedad: 15 años, 8 meses
Puntos: 2237
Respuesta: Mostrar y ocultar textos con botón

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

Código HTML:
Ver original
  1. <div>
  2.     <a href="#" class="alternar-texto">
  3.     Ver texto 1</a>
  4.      
  5.     <div class="texto">Texto 1...</div>
  6. </div>
  7. <div>
  8.     <a href="#" class="alternar-texto">
  9.     Ver texto 2</a>
  10.      
  11.     <div class="texto">Texto 2...</div>
  12. </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:
Ver original
  1. $(document).ready(function() {
  2.     $('.alternar-texto').on('click', function(e) {
  3.           $(this).closest('div').find('.texto').toggle();
  4.     });
  5. });
__________________
- León, Guanajuato
- GV-Foto