seta que movimenta ao clique (accordion)

Você diz seta inverter?

Basicamente é alterar o elemento em questão alterando suas propriedades CSS.

Dar uma olhada nisso esse accordion foi eu mesmo quem fiz:

https://github.com/Spell-Master/sm-web/tree/master/javascript/Accordion

>

17 hours ago, Omar~ said:

Você diz seta inverter?

Basicamente é alterar o elemento em questão alterando suas propriedades CSS.

Dar uma olhada nisso esse accordion foi eu mesmo quem fiz:

https://github.com/Spell-Master/sm-web/tree/master/javascript/Accordion

Obrigado, dei uma olhada sim. acabei não usando o mesmo modelo mas ja me deu um caminho para seguir.

consegui resolver o problema.

usei o seguinte código:

html:

 <button onclick="this.classList.toggle('girou')" class="btn btn-link important collapsed" type="button" data-toggle="collapse" data-target="#combustivel" aria-expanded="false" aria-controls="collapseThree">
 <img src="Icons/arrow.png" class="arrow-siranda">
 </button>

	 

	css:

/Siranda/
.girou img{

 transition: 0.4s;
 transform: rotate(180deg);
}

.arrow-siranda{
 max-width: 16px;
 text-align: right;
 right: 0;
 margin-left: 80%;
}

.important{
 z-index: 9999;
}

>

On 10/14/2019 at 5:43 PM, Omar~ said:

Você diz seta inverter?

Basicamente é alterar o elemento em questão alterando suas propriedades CSS.

Dar uma olhada nisso esse accordion foi eu mesmo quem fiz:

https://github.com/Spell-Master/sm-web/tree/master/javascript/Accordion

Consegui Resolver da Seguinte Forma:

<!-- Adicionei este onclick em cada botão do accordion -->
<button onclick="this.classList.toggle('girou')">Texto<img src="seta.jpg"></button>

<!-- css -->

<style>
	.girou img{
 transition: 0.3s;
 transform: rotate(180deg);
	}
</style>

<!--
Assim ele gira apenas a imagem da seta e deixa o texto intacto
-->