Jump to content
xdxddxd

seta que movimenta ao clique (accordion)

Recommended Posts

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

Share this post


Link to post
Share on other sites
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;
}

 

Share this post


Link to post
Share on other sites
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
-->

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By granderodeo
      Olá tenho a página index.php e tenho a página product.php, ao clicar no produto na página inicial, quero que redirecione para página product.php mostrando os dados do determinado produto que cliquei, iniciei o código mais não está dando certo, Obrigado.
       
      index.php
      <?php if (is_array($products)) { foreach ($products as $id => $row) { ?> <div class="col-sm-6 col-md-4 col-lg-3 mb-2"> <div class="card-deck"> <div class="card p-2 border-secondary mb-2"> <a href="product.php?id=<?= $row['product_id'] ?>"> <div class="hover-image"> <img class="card-img-top border-secondary" src="images/<?= $row['product_image'] ?>"/> <a href="#"><span class="texto"></span></a> </div> </a> <h3 class="text-center"><?= $row['product_name'] ?></h3> <div class="text-center text-black rounded p-1" style="font-size: 20px;">Valor&nbsp;$<?= $row['product_price'] ?></div> <button class="btn btn-success btn-block" type="button" value="Add to cart" onclick="cart.add(<?= $row['product_id'] ?>);">Adicionar ao carrinho</button> </div> </div> </div> <?php } } else { echo "No products found."; } ?>  
      product.php
      <?php $products = $_GET["product_id"]; if (is_array($products)) { foreach ($products as $id => $row) { }}; $row['product_name'] ?>  
    • By renan mafra
      Olá pessoal,

      Eu estou criando uma página .htm simples, e quero que nessa página o texto seja de uma fonte especifica, no meu caso
      GeneveNrw incorporada à página, eu peguei a fonte genevaNrw.ttf e coloquei na pasta font-geneva-nrw, acontece que
      não está rolando..., eu tento visualizar no desktop e aparece uma fonte padrão..., eu botei no IIS e aparece uma fonte padrão,
      eu fui no mime do IIS e tá habilitado formato .ttf, eu botei no Apache e também nada, pessoal me deem um help !
       
      segue o código:

       
      <!doctype html> <html> <head> <meta charset="utf-8"> <title>Documento sem título</title> <style> @font-face { font-family: 'GenevaNrw'; src: url('font-geneva-nrw/GenevaNrw.ttf'); } .titulo{ font-family: GenevaNrw; font-weight: bold; font-size: 22px; text-decoration: underline; margin-top: 17px; margin-left: 35px; } ........ ........ </style> </head> <body> <div class="container"> <div class="topo"> <div class="topo_aba"><img src="imagens/borda-esquerda.gif" width="78" height="68" border="0"></div> <div class="topo_estrelas"><img src="imagens/estrelas-direito.gif" width="112" height="24" border="0" class="img-right"></div> </div> <div class="titulo">RECEITAS DE TORTAS</div> </div> </body> </html> Estou utilizando o Dreamweaver e no mostrar visualização do programa aparece.... só lá... do resto nada.
      abraço !!!
    • By Sidwick
      Boa noite pessoal, tudo bem? 

      Estou com um site simples que peguei na internet, ele basicamente é um site de share via WhatsApp, o usuario responde algumas perguntas e no final ele é redirecionado ao WhatsApp na área de contatos para você selecionar os contatos e enviar uma mensagem. 

      O meu grande problema é que não consigo mudar o texto que aparece depois que seleciono os contatos... Já olhei todos os arquivos e não encontro código nenhum que remeta a essa mensagem que aparece após selecionar os contatos... 

      Alguém poderia me dar uma ajuda? 
    • By lemao_code()
      Bom dia Galera, não sei se este é a div certa para a postagem (div sacou?)
      Mas vamos lá,
      A uns 2meses to estudando linguagens de programação, comecei pela Logica de Programação com o professor Guanabara,Agora estou em Python e HTML5 CSS e Java.
      Python estou no que o professor chama de Mundo 2, aprendendo if, elif, else, já sei operadores aritméticos etc.
      HTML5 está mais no inicio, to aprendendo a trabalha com o css para dar estilo na pagina.(Também sei Banco de Dados no MySQL)
      Mas vamos ao assunto, to procurando colegas que estejam na parecida situação como eu, para realmente estudarmos juntos.
      Certa vez o professor falou que isso ajudaria e muito, e concordo, alguém para ajudar, e alguem para você ajudar, é um crescimento e tanto, então convido-os quem tiver interesse
      duas cabeças pensam mais que 1. (ou não se a outra cabeça for de um gênio!Jobs,BIl,Einsten,Hawking esses cara kk)
      Geralmente, estudos das 4h manhã ate as 6hrs da manhã, depois a noite das 19 até a hora que os olhos sangrarem!
       
      Pode mandar msg aqui no meu perfil, estou online!
      Obrigado!
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.