Soporte » Guías – Resolución de problemas » Cambio de nombre en botón – viceversa – Jquery

  • Estimada comunidad me dirijo a ustedes a fin de solventar un requerimiento de un cliente que desea que un botón cambie de nombre al mostrar una sección oculta de galería que ya la tengo codificada en JQuery ( Código abajo detallado) cuando se cliquee sobre el , el texto dice view more y luego cuando se le de click diga view less, y luego ya cuando el usuario le de a view less , cambie al nombre inicial de view more. Le tengo al botón la clase CSS showme, el botón ya tiene el texto de view more. Tengo el código en una sección de html. La idea seria agregar otro html solo para el código nuevo para que se de ese cambio. Gracias por su apoyo.

    <script>
    document.addEventListener('DOMContentLoaded', function() {
      jQuery(function($){
        $('.showme').click(function(){
          $('.objeto').slideToggle();
          $(this).toggleClass('opened');
        });
      });
    });
    
    </script>
    <style>
    
    .showme > div > div > a , .showme > div > div > div > i , .showme > div > div > img{
    cursor: pointer;
    -webkit-transition: transform 0.34s ease;
    transition : transform 0.34s ease;
    }
    .opened > div > div > div > i , .opened > div > div > img{
    transform: rotate(90deg);
    }
    
    </style>
    • Este debate fue modificado hace 6 días, 4 horas por josearcos.
    • Este debate fue modificado hace 6 días, 4 horas por josearcos.
Viendo 1 respuesta (de un total de 1)
  • Moderador josearcos

    (@josearcos)

    Hola, @camiloms. En teoría podrías modificar el texto con la función .text(). Para cambiar a un texto u otro, comprueba si tiene o no la clase .opened. Por ejemplo:

    document.addEventListener('DOMContentLoaded', function() {
      jQuery(function($){
        $('.showme').click(function(){
          $('.objeto').slideToggle();
          $(this).toggleClass('opened');
          if ( $(this).hasClass('opened') ) {
            $(this).text('Less');
          } else {
            $(this).text('View more');
          }
        });
      });
    });

    Espero haberte ayudado, cuéntanos si has podido solucionarlo.

    Saludos.

Viendo 1 respuesta (de un total de 1)
  • Debes estar registrado para responder a este debate.