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 renan mafra
      Olá pessoal,

      Eu tenho uma página .html e um DIV principal que chamei de conteiner eu tenho mais outras DIVS dentro dessa DIV principal,
      eu gostaria que na medida que as DIVs internas fossem preenchidas a div principal container se expandisse automaticamente
      na vertical.
      Eu quero fazer aquele esquema em que ao clicar em um dos 5 links  ele se abra (se expanda) o código base já tenho mas não sei
      como a div que engloba tudo "cresça" para baixo na medida que for sendo clicado e abrindo as outras DIVS, estou no desenvolvimento
      ainda mais quando boto height: auto; a div container se contrai em vez de acompanhar o resto, como faço isso no CSS ?
       
      Segue o esqueleto do código:
       
      <html> <head> <style> .container{ width: 850px; min-height: 513px; margin-left: 5%; margin-top: 5%; background-color: #DCDCDC; border-radius: 0.7em 0.7em; } .......... ........ ......... ........ </style> </head> <body> <div class="container"> <div class="filho"> <div class="topo"></div> </div> <div class="titulo"></div> <div class="caixa"> <div class="preco"></div> <div class="linha"></div> <div class="escondido"></div> <div class="balao_cinza"></div> </div> </div> </body> </html>  
    • 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? 
×

Important Information

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