Button does not change expansion arrows

Asked

Viewed 346 times

1

In my project, I have some "Steps" to be followed and to advance the Steps, I put "Continue" Buttons at the end of each Steps, they expand the next Collapse and close the previous one, however, I also put arrows that change image (closed right, open down) when you click on them or the title and when I click on the move button, they don’t change, so some are down and some are to the right.

I would like them to go with Collapse, when closed, they turn to the right and when opened, they turn down, this only happens if I click them or the title, not the button.

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 of changing 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);

    }
});

Collapses code:

<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 have no experience with javascript and am learning, these arrows are giving me a lot of trouble.

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

}

End of the 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>
php javascript html

  • Try putting in the function next() a code to change the images: $(".img-change").attr("src", "assets/img/arrow_right.png");

  • @sam solved, but another problem appeared, can help me? Now it closes, however, does not open the next arrow to the next Collapse. Like, when you click the button, it opens the next Collapse and closes the current one, the current one changes with the code you passed, but the next one doesn’t change and shows that it is open, the icon remains closed while it is open. Could you help me? Anything, post the answer!

  • Remove all the code I suggested. Change the line var element = $('img[index='+index+']'); for var element = $('img[index='+index+']', this);

  • Still unsuccessful, the arrows remain closed every Collapse change

  • You only have 2 collapses? The button is always onclick="next(2)"?

  • No, I have 12 collapses, the button is always next(1), next(2), next(3), and so on.

  • Okay, these buttons go inside the collapses, each one?

  • Yes, each one is within a Collapse, want me to post the code of one of the collapses?

  • See if it goes like this: https://jsfiddle.net/hc9fd540/

  • That’s exactly what I want

Show 5 more comments

1 answer

0

You can simplify the code by creating an event for the h1 and to the buttons and go changing the collapses as you click. Create an object with the URL’s of the images that is easier to work with as well. Opening a panel will close those that are open and change the arrows. Clicking the "Continue" button will open the next panel and change the arrows as the panel is closed and opened.

No need to use these attributes index you are using to identify the elements. You also do not need to use the function next() 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>
<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>

  • I put and it didn’t work buddy, look at the example, I put in the main post

  • I read your comment again, I don’t know if you understand... The normal Collapse closes when I press the "Continue" button the problem is that the arrows do not go back to the closed position. Closed = Right arrow -- Open = Down arrow. When I press the button, it continues to show the down arrow even with the closed Collapse

  • I haven’t been successful yet, I think I did as you said, the $('H1.change:eq('+(step-1)+')'). Trigger("click", step); stood at the end of Function next(step), as you put in the code and I even copied your JS, changing the url of the arrows, of course, and it still didn’t work

  • the next arrow still does not open down, only the Collapse

  • yes, it looks like this: var element = $('img[index='+index+']', this);

  • The js code you posted, before Function next, I copied and pasted, just changing the arrow url only, I didn’t change anything you put in

  • I put the end of the Function next code, soon after starting another script tag and start the js exchange code, see if everything is right

  • which. each? I did not find

  • But he’s not even in my code either

  • the 3 lines of code of $("[role=tabpanel]"). Collapse('Hide');, go to the end of the next Function, in each Function? I put the 3 at the end of Function, keeping everything as it was and the button didn’t work. Hence I replaced all the if and if Else putting only the code that was and when I press the button, it closes the current expands all the others at once and still does not change the image of the arrow,

  • https://jsfiddle.net/eup8b61L/2/&#Xa If you need any information, you can ask! Thank you very much for your help!

  • Look now. Just copy the JS. As I said in the reply, it is not necessary to use the index attributes and the next function().

  • I changed all the JS code, and even used as an example your H1, changing only the information to work at each step, and I did not succeed yet, I do not understand why in the example that runs here in the stack, works, and in mine not, I do not know where I am doing wrong

Show 8 more comments

Browser other questions tagged php javascript html

You are not signed in. Login or sign up in order to post.