0

como puedo hacer girar un icono al dar click sobre un botón y sobre el mismo icono, el efecto es que cuando de click se muestre como desplegado....hasta el momento llevo la siguiente funcionalidad para mostrar el contenido de una tabla html...se oculta y se desoculta, pero a la par necesito que el icono gire cuando la tabla este desplegada y viceversa

 _goToDesplegable() {
    console.log('btn _goToDesplegable')
    this.expandable = this.shadowRoot.querySelector('#bnc-expandable-detail')
    this.expandable.style.display === 'block' ? this.expandable.style.display = 'none' : this.expandable.style.display = 'block';
    this._opened = false;
    this.requestUpdate();
  }
.collapsible {
  cursor: pointer;
  padding: 18px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;

}
<button class="collapsible"
@click="${this._goToDesplegable}">Detalle<icon  icon="${iconUnfold}" size="26"></icon>
</button>  

<div class="content" id="bnc-expandable-detail"><span>Tabla HTML</span></div>

introducir la descripción de la imagen aquí

1 respuesta 1

0

Te sugiro añadir/quitar una classe al icono en tu function goToDesplegable. Esa classe solo girar el elemento por via de un transform rotate.

this.querySelector('.collapsible > icon').classList.toggle('expanded');
icon.expanded {
  transform: rotate(90deg);
}

1
  • Excelente, te lo agradezco mucho.... Saludos.....
    – Pelico
    Commented el 27 sept. 2022 a las 21:55

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.