seta que movimenta ao clique (accordion)

[xdxddxd 0]

Galera neste site aqui tem umas setas em um accordion, e eu gostaria de saber como faço para elas se movimentarem a cada clique.

se alguem conseguir algum link com tutorial ou me passar algum script eu sou imensamente agradecido.

estou usando o accordion padrão do bootstrap 4+

Clique neste: Exemplo

[Omar~ 87]

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

[xdxddxd 0]

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;
}

 

[xdxddxd 0]

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
-->