1

Em meu projeto, possuo alguns "steps" a ser seguidos e para avançar os steps, eu coloquei buttons de "Continue" no final de cada steps, eles expandem o próximo collapse e fecham o anterior, porém, eu coloquei também setas que trocam de imagem (direita fechado, para baixo aberto) quando se clicam nelas ou no título e quando eu clico no botão para avançar, elas não mudam, assim ficando algumas para baixo e outras para a direita.

Eu gostaria que elas acompanhassem o collapse, quando fechado, elas voltassem para a direita e quando abertas, elas virassem para baixo, isso só acontece caso eu clique nelas ou no título, no botão não.

Código do botão:

<div class="form-group row"><br/>
     <button class="btn btn-primary" onclick="next(2)">
         Continue <i class="fa fa-chevron-right"></i>
     </button>
</div>  

Código JS das setas que trocam:

$('h1.change').click(function (){
    var img1 = 'assets/img/arrow_right.png';
    var img2 = 'assets/img/arrow_down.png';
    var index = $(this).attr('index');
    var element = $('img[index='+index+']');
    if(element.attr('src') === img1){
        element.attr('src',img2);
    }else if(element.attr('src') === img2){
        element.attr('src',img1);

    }
});

Código dos collapses:

<h1 index="1" class="collapsed change" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" 
aria-expanded="false" aria-controls="collapseTwo" ng-click="alert_step2()">
    <img index="1" class="change img-change" src="assets/img/arrow_right.png" style="width: 20px; height: 25px">
    Step 2 - Acknowledge Your Strengths (highest scores)
</h1>

Não tenho experiência com javascript e estou aprendendo, essas setas estão me dando muito trabalho.

Mudanças do collapse:

    if(step == 1)

{

    $('#collapseOne').collapse('hide');     

    $('#collapseTwo').collapse('show');

    $(".img-change").attr("src", "assets/img/arrow_right.png");

    $("[data-toggle=collapse]").each(function(){
    $(this).attr("aria-expanded", "false").addClass("collapsed");
    $($(this).attr("href")).removeClass("show");
    });

}

Final do código js

    else if(step == 11)

{

    $('#collapseTen').collapse('hide');     

    $('#collapseEleven').collapse('show');

    $(".img-change").attr("src", "assets/img/arrow_right.png");

}

   $('h1.change:eq('+(step-1)+')').trigger("click", step);


}
</script>

</script>

<script>

$('h1.change').click(function (e, step){
var img1 = 'assets/img/arrow_right.png';
var img2 = 'assets/img/arrow_down.png';

if(step) $(".img-change").attr("src", img1);

var index = $(this).attr('index');
var element = $('img[index='+index+']', this);
if(element.attr('src') === img1){
    element.attr('src',img2);
}else if(element.attr('src') === img2){
    element.attr('src',img1);

}
});
</script>
10
  • Tente colocando na função next() um código para mudar as imagens: $(".img-change").attr("src", "assets/img/arrow_right.png");
    – Sam
    29/10/2018 às 22:21
  • @sam resolveu, mas apareceu outro problema, pode me ajudar? Agora ela fecha, porém, não abre a próxima seta pro próximo collapse. Tipo, ao clicar no botão, ela abre o próximo collapse e fecha o atual, o atual troca com o código que você passou, porém o próximo não troca e mostra que ta aberto, o ícone continua fechado enquanto ele está aberto. Poderia me ajudar? Qualquer coisa, posta a resposta fora de um comentário pra eu te marcar como respondido! Aliás, obrigado! 30/10/2018 às 14:00
  • Remova todo o código que sugeri. Troque a linha var element = $('img[index='+index+']'); por var element = $('img[index='+index+']', this);
    – Sam
    30/10/2018 às 18:04
  • Sem sucesso ainda, as setas continuam fechadas a cada troca de collapse 30/10/2018 às 18:08
  • Vc só tem 2 collapses? O botão é sempre onclick="next(2)"?
    – Sam
    30/10/2018 às 18:36

1 Resposta 1

0

Você pode simplificar o código criando um evento para os h1 e para os botões e ir alterando os collapses conforme os cliques. Crie um objeto com as URL's das imagens que fica mais fácil de trabalhar também. Ao abrir um painel, irá fechar os que estiverem abertos e alterar as setas. Ao clicar no botão "Continuar" irá abrir o próximo painel e alterar as setas conforme for fechado e aberto o painel.

Não é necessário usar esses atributos index que está usando para identificar os elementos. Também não precisa usar a função next() com if's repetitivos que torna a manutenção bem mais complicada. Veja:

$('h1.change').click(function (e, step){
   var imgs = {
    img1: 'https://cdn2.iconfinder.com/data/icons/32pxmania/misc_18.png',
    img2: 'https://cdn3.iconfinder.com/data/icons/woothemesiconset/32/blue_arrow_down.png'
   }
    
   var seta = $("img", this).attr("src");
   var c = $(".collapse.show");
   c.closest(".card").find("h1.change img").attr("src", imgs.img1);
   c.collapse('hide');
   
   if(!step && seta == imgs.img1){
      step = 2;
   }else if(!step && seta != imgs.img1){
      step = 1;
   }

   $("img", this).attr("src", imgs['img'+step]);

});

$(".card button.btn.btn-primary").click(function(){
   var t = $(this).closest(".card");
   t.find("h1.change").trigger("click", 1);
   t.next(".card").find("h1.change").trigger("click", 2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<div class="card">
   <div class="card-header" role="tab" id="headingTwo">
      <h5 class="mb-0">
         <h1 index="1" class="collapsed change" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" ng-click="alert_step2()"> <img index="1" class="change img-change" src="https://cdn2.iconfinder.com/data/icons/32pxmania/misc_18.png" style="width: 20px; height: 25px">Step 2 - Acknowledge Your Strengths (highest scores)</h1>
      </h5>
   </div>
   <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo"  ng-click="alert_step2()">
      <div class="card-block">
         <h4>Whatever you focus on expands. Focusing on your strengths supports your remembrance of being capable, victorious and powerful. It is your strengths that will provide the ability and confidence to succeed in creating what you want in your life and happiness, financial freedom, radiant health, peace of mind. You will draw upon these strengths and apply them to the areas of your life that need support. </h4>
         <div align="center" class="col-md-12" id="plotStep2"></div>
         <div align="center">
            <div class="form-group row">
               <div class="form-group row">														<br/>
                  <button class="btn btn-primary"> Continue <i class="fa fa-chevron-right"></i></button>
               </div>	
            </div>
         </div>
      </div>
   </div>
</div>

<div class="card">
   <div class="card-header" role="tab" id="headingThree">
      <h5 class="mb-0">
         <h1 index="3" class="collapsed change" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseTwo" ng-click="alert_step2()"> <img index="3" class="change img-change" src="https://cdn2.iconfinder.com/data/icons/32pxmania/misc_18.png" style="width: 20px; height: 25px">Step 3 - Acknowledge Your Strengths (highest scores)</h1>
      </h5>
   </div>
   <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingTwo"  ng-click="alert_step2()">
      <div class="card-block">
         <h4>Whatever you focus on expands. Focusing on your strengths supports your remembrance of being capable, victorious and powerful. It is your strengths that will provide the ability and confidence to succeed in creating what you want in your life and happiness, financial freedom, radiant health, peace of mind. You will draw upon these strengths and apply them to the areas of your life that need support. </h4>
         <div align="center" class="col-md-12" id="plotStep2"></div>
         <div align="center">
            <div class="form-group row">
               <div class="form-group row">														<br/>
                  <button class="btn btn-primary"> Continue <i class="fa fa-chevron-right"></i></button>
               </div>	
            </div>
         </div>
      </div>
   </div>
</div>

13
  • Eu coloquei e não funcionou amigo, olha o exemplo, eu coloquei no post principal 30/10/2018 às 17:12
  • Eu lendo seu comentário de novo, não sei se entendeu... O collapse fecha normal quando aperto o botão "Continue" o problema é que as setas não voltam para a posição fechada. Fechado = seta direita -- Aberto = seta para baixo. Quando aperto o button, ela continua mostrando a seta para baixo, mesmo com o collapse fechado 30/10/2018 às 17:14
  • Ainda não obtive sucesso, acho que fiz da maneira como falou, o $('h1.change:eq('+(step-1)+')').trigger("click", step); ficou no fim da function next(step), como você colocou no código e eu até copiei o seu JS, mudando o url das setas, claro, e mesmo assim não funcionou 30/10/2018 às 18:59
  • a seta seguinte ainda não abre para baixo, só o collapse 30/10/2018 às 19:00
  • sim, está assim: var element = $('img[index='+index+']', this); 30/10/2018 às 19:02

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .