Button does not change expansion arrows

1

In my project, I have some steps to follow and to advance the steps, I put "Continue" buttons at the end of each step, they expand the next collapse and close the previous one, however, I also put arrows which changes image (right closed, down open) when clicking on them or the title and when I click the button to move forward, they do not change, thus getting some down and others to the right.

I would like them to follow the collapse, when it is closed, they go back to the right, and when they are opened, they are turned down, this happens only if I click on them or the title,

Button code:

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

JS code for switching arrows:

$('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);

    }
});

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

I do not have experience with javascript and I'm learning, these arrows are giving me a lot of work.

Collapse changes:

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

}

End of js code

    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>
    
asked by anonymous 29.10.2018 / 18:49

1 answer

0

You can simplify the code by creating an event for the h1 and for the buttons and go changing the collapses as the clicks. Create an object with the URLs of the images that is easier to work with as well. When you open a panel, it will close the ones that are open and change the arrows. Clicking the "Continue" button will open the next panel and change the arrows as you close and open the panel.

You do not need to use these index attributes you are using to identify the elements. You also do not need to use the next() function with repetitive if's that makes maintenance much more complicated. See:

$('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><scriptsrc="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>
    
30.10.2018 / 16:23