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 lezão
      Ola boa tarde!
      Td bem com vcs?
       
      Alguém poderia me dar uma luz, de como fazer essas imagens ficar a frente do slideshow e qnd responsivo aparecer de 3 em 3.
       
       
      obrigado pela atenção.

    • By RukasuNiiChan
      ========== Meu Projeto ==========
      * Introdução
      Bem , eu estou no ultimo ano do E.M , e com essa pandemia , algumas adaptações foram tomadas , como todos sabem , a AULA ONLINE , porem , na minha escola não se utiliza a verificação de presença ( Chamada ) por Vídeo , através de um WebCam , e sim a confirmação por digitalização , todos os alunos devem escrever " ok " quando o respectivo professor digitar " chamada " no chat:
      Exemplo 1: https://prnt.sc/uiw9jy
      * Ideia
      Então o que eu pensei , A Ideia Inicial era criar um BOT para identificar a palavra " Chamada " no chat , e então , automaticamente , ele escrevesse " ok " ou " Presente " para assim automatizar o processo e facilitar a minha vida.
      Porem eu descobri uma funcionalidade no Google que são as extensões para o Google Meet que até então eu não sabia que existiam
      Entretanto se alguém que não tem experiencia em extensões mas tem em engenharia de software , me ajudaria da mesma forma
      * Conclusão
      Enfim , a minha ideia é automatizar o processo de " Responder a chamada " durante a aula online ,  como sou um estudante de programação queria muito a ajuda de vocês pra isso , pois meu conhecimento é leigo , qualquer duvida sobre o projeto , podem responder a este tópico pois , irei responder dentro de 24 horas , ou se o interesse nele for grande , me chamem na DM do Discord ( Rukasu#7321 ) 
      ===============================
       
    • By Leonel57
      Prezados,
      Fiz um menu lateral mas ao colocar várias imagens ao lado elas ficam na parte de baixo.
      Ele é um menu de produtos.
      Poderiam me ajudar?
      <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title></title> <style type="text/css"> .container { border: 1px solid gray; display: inline-block; float: right; margin-right: 150px; margin-left: 300px; border-spacing: 5px; padding: :5px; } p { text-align:center; } .menulateral{ background-color:#5F9EA0; width: 250px; height: 1000px; } ul{ list-style: none; } ul li a{ display: block; font-size: 18px; font-family: 'Arial'; padding: 10px; border-bottom: solid 1px #FFFFF0; color: #ccc; text-decoration: none; } ul li span{ float: right; padding-right: 10px; } ul li a:hover{ background-color: #5b859a; } .conteudo{ display: table; } </style> </head> <body> <nav class = menulateral> <ul> <li><a href="racao-cachorro.html">Ração para Cachorros</a></li> <li><a href="">Peticos e Ossos</a></li> <li><a href="">Casas e Tocas</a></li> <li><a href="">Coleiras</a></li> <li><a href="">Tapetes e Fraldas</a></li> <li><a href="">Briquendos</a></li> <li><a href="">Camas e Cobertores</a></li> <li><a href="">Portões</a></li> <li><a href="">Grades</a></li> </ul> <ul> <li><a href="petisco-gato.html">Petiscos para Gatos</a></li> <li><a href="areia-gato.html">Areia</a></li> <li><a href="">Beleza e Limpeza</a></li> <li><a href="">Arranhadores e Brinquedos</a></li> <li><a href="">Coleiras e Peitorais</a></li> <li><a href="">Roupas</a></li> </ul> <ul> <li><a href="alimentacao-passaro.html">Alimentacao</a></li> <li><a href="gaiola-passaro.html">Gaiolas</a></li> <li><a href="">Puleiro</a></li> <li><a href="">Acessorios</a></li> <li><a href="">Farmácia</a></li> </ul> <ul> <li><a href="alimentacao-peixe.html">Alimentacao</a></li> <li><a href="aquario-peixe.html">Aquários</a></li> <li><a href="">Decoração</a></li> </ul> </nav> <nav class = "conteudo"> <div class="container"> <img src="imagem/areiagato.png" height="100" width="100" /> <p>This is image 1</p> </div> <div class="container"> <img class="middle-img" src= "imagem/bravecto.png" height="100" width="100" /> <p>This is image 2</p> </div> <div class="container"> <img src="imagem/quatree.png" height="100" width="100" /> <p>This is image 3</p> </div> <div class="container"> <img src="imagem/areiagato.png" height="100" width="100" /> <p>This is image 1</p> </div> <div class="container"> <img class="middle-img" src= "imagem/bravecto.png" height="100" width="100" /> <p>This is image 2</p> </div> <div class="container"> <img src="imagem/quatree.png" height="100" width="100" /> <p>This is image 3</p> </div> <div class="container"> <img src="imagem/areiagato.png" height="100" width="100" /> <p>This is image 1</p> </div> <div class="container"> <img class="middle-img" src= "imagem/bravecto.png" height="100" width="100" /> <p>This is image 2</p> </div> <div class="container"> <img src="imagem/quatree.png" height="100" width="100" /> <p>This is image 3</p> </div> </div> </nav> </body> </html>  



    • By Matheus Bispo
      Boa tarde colegas programadores, estou com uma dúvida tremenda.
       
      Estou desenvolvendo um sistema para uma loja de veículos, e em uma parte do sistema, em cadastro de clientes, vai aparecer todos os clientes que ela possui em uma tabela(Usando DataTable do bootstrap), em cada cadastro, tenho um botão de editar, que imediatamente, abre uma janela modal com os dados daquele Cliente. Quando eu clico pela primeira vez em algum botão de Editar, ele me abre correto e o fechar é funciona normal. Agora vou clicar no editar novamente, porque anteriormente eu havia clicado no cliente errado, ele me traz os dados correto, mas o botão CANCELAR não funciona mais, preciso dar F5 para ele sumir. O que eu estaria fazendo de errado?
       
      Segue abaixo o meu código:
       
      <!DOCTYPE html>  
       <html>
            <head>  
                 <title>Clientes</title>
                 <link rel="shortcut icon" href="../assets/img/certi.png" type="image/x-icon" />
                 <form name="formulario" method="POST" action="">
                 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
                 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
                 <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>  
                 <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>            
                 <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
                 <link href="../assets/css/bootstrap.min.css" rel="stylesheet">
                     <!-- Include all compiled plugins (below), or include individual files as needed -->
                <script src="../assets/js/bootstrap.min.js"></script>
                <script src="http://jquery-joshbush.googlecode.com/files/jquery.maskedinput-1.2.2.min.js"></script>
                <script src="http://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.min.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.min.js"></script>
                <script src="http://jquery-joshbush.googlecode.com/files/jquery.maskedinput-1.2.2.min.js"></script>
                <script type="text/javascript">
                  function Ir(pagina){
                    document.formulario.action = pagina
                    document.formulario.submit();
                  }
                </script>
            </head>  
      <body onselectstart="return false" oncontextmenu="return false" ondragstart="return false"
        onMouseOver="window.status='..message perso .. '; return true;">
                 <div class="container">
                     
                      <center> <img src='../assets/img/logo_clientes.jpg' class="img-responsive"> </center>
                      <br />
                  <?php
                     if(!empty($Dados["btnNovoCad"])):
                         $NovoCad = new CreateCliente();
                         unset($Dados["btnNovoCad"]);
                    $Dados["cli_garagem"] = $_SESSION["id-garagem"];
                         $NovoCad->exeCreate('clientes', $Dados);
                         echo $NovoCad->getMsg();
                     endif;
                     ?>
                      <div class="table-responsive">  
                           <table id="employee_data" class="table table-striped table-bordered">  
                                <thead>  
                                     <tr>  
                                          <td>ID</td>  
                                          <td>Nome</td>
                                          <td>Ações</td>
                                     </tr>  
                                </thead>
                                <?php
                                  $ChamarLeitura = new ReadCliente();
                                  $ChamarLeitura->LerClientes();
                                 foreach($ChamarLeitura->getResultado() as $clientes){
                                       extract($clientes);
                                     echo '  
                                     <tr>  
                                         <td>'.intval($cli_id).'</td>                                      
                                          <td>'.utf8_decode($cli_nome).'</td>
                                          ';?>
                                          <td>
                                              <button type="button" class="btn btn-xs btn-warning" data-toggle="modal" data-target="#myModalEdit" data-whatever="<?php echo $cli_id; ?>" data-whatevernome="<?php echo utf8_decode($cli_nome);?>">Editar</button>
                                          </td>                                   
                                     </tr>    
                                   <?php
                                  }  
                                ?>
                           </table>  
                      </div>  
                 </div><br>
              <center>
                  <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModalNovo">Novo Cliente</button>
                  <button type="button" class="btn btn-primary" onClick="Ir('index');">Voltar ao Menu</button><br><br>
              </center>
       
      <!-- Inicio Modal Novo Cadastro -->
      <div class="modal fade" data-backdrop="static" id="myModalNovo">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h3 class="modal-title" id="exampleModalLabel">Cadastrar Cliente</h3>
                </div>
                <div class="modal-body">
                  <form name="formularioB" method="POST" action="">
                        <div style="text-align: left;">
                           Nome:*
                           <input type="text" class="form-control" name="cli_nome" required="true" autofocus="true"><br>
                           *Campos obrigatórios
                        </div>
                    <div class="modal-footer">
                      <input type="submit" class="btn btn-success" name="btnNovoCad" value="Salvar">
                      <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
                    </div>
                  </form>
                </div>        
              </div>
            </div>
          </div>
          <!-- Fim Modal -->
       
      <!-- Inicio Modal Editar Cadastro -->
        <div class="modal fade" id="myModalEdit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h3 class="modal-title" id="exampleModalLabel">Editar Cliente</h3>
                </div>
                <div class="modal-body">
                  <form name="formularioB" method="POST" action="">
                        <div style="text-align: left;">
                           Nome:*
                           <input type="text" class="form-control" name="cli_nome" id="cli_nome" required="true" autofocus="true"><br>
                        </div>
                    <div class="modal-footer">
                      <input type="submit" class="btn btn-success" name="btnEditCad" value="Salvar">
                      <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
                      <input type="hidden" name="id-cliente" id="id-cliente" value="">
                    </div>
                  </form>
                </div>        
              </div>
            </div>
          </div>
          <!-- Fim Modal -->
       
        <script type="text/javascript">
          $('#myModalEdit').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget)
            var recipient = button.data('whatever')
            var recipientnome = button.data('whatevernome')
            var modal = $(this)
            modal.find('.modal-title').text('Editar Cliente')
            modal.find('#id-cliente').val(recipient)
            modal.find('#cli_nome').val(recipientnome)
            
          })
        </script>
         </form>
        </body>
       </html>  
       <script>  
       $(document).ready(function(){  
            $('#employee_data').DataTable();  
       });  
       </script>
    • By fideles
      Fala pessoal, como anda as coisas?
       
      Meu conhecimento em JS e quase neutro, conheço algo, mais talvez não o suficiente para o que eu precise, por isso venho pedir ajuda a vocês,
       
      Tenho um pequeno programinha, simples mesmo que tem 4 areas (Administração, Compras, Financeiro, Almoxarifado).
       
      Quem fica na ADM solicita algo,  compras visualiza e da um "ok" e o financeiro tbm tem que dar um "ok" e no final, o almoxarifado dá um "Processo Concluido" (está parte está ok, funcionando, sem erro)
       
      Meu problema seria que quem está no almoxarifado consegue clicar no botão "Processo Concluido" mesmo o pessoal de compras e financeiro não dando um "ok" na solicitação ou ele tbm consegue dar "Processo Concluido" se um ou outro dar um "ok". Precisaria que ele so conseguisse dar "Processo Concluido" se os dois darem o "ok", se so um dar "ok" ele não pode dar "Processo Concluido".
       
      Alguém consegue pelo menos me dar um norte para que eu possa dar continuidade? Já tentei em PHP e nada.
       
×

Important Information

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