Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Mostrar y ocultar textos con botón

Estas en el tema de Mostrar y ocultar textos con botón en el foro de Jquery en Foros del Web. Buenos días Tengo varios párrafos de texto y deseo abrir cada uno no que se abran todos. Este es el código: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código Javascript ...
  #1 (permalink)  
Antiguo 28/10/2020, 09:34
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.176
Antigüedad: 17 años, 4 meses
Puntos: 9
Pregunta Mostrar y ocultar textos con botón

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:
Ver original
  1. $(document).ready(function(){
  2.  
  3.     $('.alternar-texto').toggle(
  4.  
  5.         function(e){
  6.             $('.texto').slideDown();
  7.             $(this).text('Ocultar texto');
  8.             e.preventDefault();
  9.         }, // Separamos las dos funciones con una coma
  10.      
  11.         function(e){
  12.             $('.texto').slideUp();
  13.             $(this).text('Ver texto');
  14.             e.preventDefault();
  15.         }
  16.  
  17.     );
  18.  
  19. });

Código HTML:
Ver original
  1. <a href="#" class="alternar-texto">
  2. Ver texto 1</a>
  3.  
  4. <div class="texto">Texto 1...</div>
  5.  
  6. <a href="#" class="alternar-texto">
  7. Ver texto 2</a>
  8.  
  9. <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
__________________
Diseñador Gráfico publicitario
  #2 (permalink)  
Antiguo 28/10/2020, 09:57
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 10.106
Antigüedad: 12 años, 10 meses
Puntos: 2235
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
  #3 (permalink)  
Antiguo 28/10/2020, 10:56
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.176
Antigüedad: 17 años, 4 meses
Puntos: 9
Respuesta: Mostrar y ocultar textos con botón

Hola Triby
Excelente tu explicación

Así quedo el código:

Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.  
  3.     $('.alternar-texto').toggle(
  4.  
  5.         function(e){
  6.         $(this).closest('div').find('.texto').slideDown();
  7.             $(this).text('Ocultar texto');
  8.             e.preventDefault();
  9.         },
  10.      
  11.         function(e){
  12.         $(this).closest('div').find('.texto').slideUp();
  13.             $(this).text('Ver texto');
  14.             e.preventDefault();
  15.         }
  16.  
  17.     );
  18.  
  19. });


Gracias por tu ayuda
__________________
Diseñador Gráfico publicitario
  #4 (permalink)  
Antiguo 28/10/2020, 11:16
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.512
Antigüedad: 9 años, 7 meses
Puntos: 957
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
  #5 (permalink)  
Antiguo 28/10/2020, 13:28
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.176
Antigüedad: 17 años, 4 meses
Puntos: 9
Respuesta: Mostrar y ocultar textos con botón

Gracias por tu explicación Alexis88.
__________________
Diseñador Gráfico publicitario

Etiquetas: textos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:35.