Question

JSFiddle link:

http://jsfiddle.net/dqkZN/32/

---

Here is the relevant code:

<div class="categories">     
    <h3>
        <img src="http://i.imgur.com/t5UXT.gif" />
        <a href="#">CCTV</a>
        <sub>Circuito Cerrado</sub>
    </h3>     
    <div>
        <ul>
            <li><a href="#">Control de Asistencia</a></li>
            <li><a href="#">Controladores de Accesso</a></li>
            <li><a href="#">Controladores de Asistencia</a></li>
            <li><a href="#">Chapas Electricas</a></li>
            <li><a href="#">Chapas Electromagneticas</a></li>
            <li><a href="#">Tarjetas de Proximidad</a></li>
        </ul>
    </div>

    <h3>
        <img src="http://i.imgur.com/TThAk.gif" />
        <a href="#">ALARMAS</a>
        <sub>Magellan Sprit Spectra Digiplex/Evo</sub>
    </h3>     
    <div>
        <ul>
            <li><a href="#">Control de Asistencia</a></li>
            <li><a href="#">Controladores de Accesso</a></li>
            <li><a href="#">Controladores de Asistencia</a></li>
            <li><a href="#">Chapas Electricas</a></li>
            <li><a href="#">Chapas Electromagneticas</a></li>
            <li><a href="#">Tarjetas de Proximidad</a></li>
        </ul>
    </div>
</div>

$('.categories').accordion();

$('.categories').accordion({
   changestart: function(event, ui) {
       $('h3 img').attr('src', 'http://i.imgur.com/TThAk.gif');
   }
});

$('.categories h3 img').click(function() {
    $(this).next().click();
});

When someone clicks a category header I want to change every icon to the plus sign (meaning it’s collapsed) and after that change the newly selected panes icon to a minus sign.

Here is the specific place I think I need to place the javascript code:

$('.categories').accordion({
   changestart: function(event, ui) {
       $('h3 img').attr('src', 'http://i.imgur.com/TThAk.gif');
       //SOME CODE SHOULD GO HERE TO ACT ON "THIS" NEWLY SELECTED PANE.
   }
});

Answer 1

new fiddle http://jsfiddle.net/dqkZN/39/

is this what you are looking for??

var minusImgUrl = "http://i.imgur.com/t5UXT.gif",
    plusImgUrl  = "http://i.imgur.com/TThAk.gif";

$('.categories').accordion({
 changestart: function(event, ui) {
  $('h3 img').attr('src', 'http://i.imgur.com/TThAk.gif');       
  ui.newHeader.find("img").attr("src", minusImgUrl);
  ui.oldHeader.find("img").attr("src", plusImgUrl);
 }
});