Cambio de nombre en botón – viceversa – Jquery

  • camiloms

    (@camiloms)


    hace 3 años, 6 meses

    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 3 años, 6 meses por José Arcos.
    • Este debate fue modificado hace 3 años, 6 meses por José Arcos.
Viendo 1 respuesta (de un total de 1)
  • Moderador José Arcos

    (@josearcos)

    hace 3 años, 6 meses

    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)
  • El debate ‘Cambio de nombre en botón – viceversa – Jquery’ está cerrado a nuevas respuestas.

Etiquetas