Change image source onclick accordion

Question

I have to use Plone4 at work, which imposes a lot of limitations on development. The current Bootstrap version on our Plone installation is 2.3.2. By request I created a page with some lines of the text clickable to have accordion panel. Next to the text I have dropdown arrow, which changes direction depending on whether accordion panel is open or not. The only thing I am not satisfied with is the fact, that when you click on different accordion panel, the arrow image on the opened before stays the same. Is there any way to fix this behavior? My code:

HTML:

    <div class="accordion-group top">
    <div class="accordion-heading">
    <a id="collapse01" class="accordion-toggle" data-toggle="collapse" data-parent="#timeline-accordion" href="#preferred-name">Indicate "Preferred Name" in HR Self-Service<img id="arrow01" src="/arrow-down" alt="Indicates a dropdown for additional information" />
    </a>        
    <div class="green-bg-gradient color-block col-9 jan16"></div>      
    </div><!-- /heading -->
    <div id="preferred-name" class="accordion-body collapse">
    <div class="accordion-inner">Completed 10/06/16</div>    
    </div><!-- /collapsed -->
    </div><!-- /group -->

jQuery:

    jqbs("a#collapse01" ).click(function() {
    if (jqbs('img#arrow01').attr('src')==='/arrow-up') {
    jqbs('img#arrow01').attr('src', '/arrow-down')
    } else {
    jqbs('img#arrow01').attr('src', '/arrow-up')
    }
    });

Thanks for advice in advance!

Answer 1

I don't know if you can use jQuery. It could be done with CSS Selector:

$('img[src=/arrow-up]').attr('src', '/arrow-down');

Putting this code into the click event, you change all arrows up to arrows down, then you can change the event focus from down to up.

Answer 2

If you give your images a class, something like this:

<img id="arrow01" class="arrow" src="/arrow-down" alt="Indicates a dropdown for additional information" />

then you can handle the click event and set the arrow appropriately on each. This works because when the accordion is clicked to open a panel, it assumes all the others will be closed, so it sets all the arrows closed, then lastly opens the one relating to the currently clicked panel.

Note also I've changed the click event to handle clicks on all accordion panels - your existing sample only handled the top-most panel because it used an ID and not a class.

jqbs(".accordion-toggle" ).click(function() {
    if (jqbs('.arrow', this).attr('src') === "arrow-up") { //this panel is already open
      jqbs('.arrow', this).attr('src', '/arrow-down'); //show down arrow (for closed panels)
    }
    else { //open this panel
      jqbs('.arrow').attr('src', '/arrow-down'); //make them all look closed
      jqbs('.arrow', this).attr('src', '/arrow-up'); //make this one look open
    }
});