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>