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>