title: Using the jQueryUI accordion and firing an event when it changes to act within the new "pane"
body: <p>JSFiddle link:</p>
  
  <p><a href="http://jsfiddle.net/dqkZN/32/" rel="nofollow">http://jsfiddle.net/dqkZN/32/</a></p>
  
  <hr>
  
  <p>Here is the relevant code:</p>
  
  <pre><code>&lt;div class="categories"&gt;     
      &lt;h3&gt;
          &lt;img src="http://i.imgur.com/t5UXT.gif" /&gt;
          &lt;a href="#"&gt;CCTV&lt;/a&gt;
          &lt;sub&gt;Circuito Cerrado&lt;/sub&gt;
      &lt;/h3&gt;     
      &lt;div&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Control de Asistencia&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Controladores de Accesso&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Controladores de Asistencia&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Chapas Electricas&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Chapas Electromagneticas&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Tarjetas de Proximidad&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;h3&gt;
          &lt;img src="http://i.imgur.com/TThAk.gif" /&gt;
          &lt;a href="#"&gt;ALARMAS&lt;/a&gt;
          &lt;sub&gt;Magellan Sprit Spectra Digiplex/Evo&lt;/sub&gt;
      &lt;/h3&gt;     
      &lt;div&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Control de Asistencia&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Controladores de Accesso&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Controladores de Asistencia&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Chapas Electricas&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Chapas Electromagneticas&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Tarjetas de Proximidad&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  $('.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();
  });
  </code></pre>
  
  <p>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.</p>
  
  <p>Here is the specific place I think I need to place the javascript code:</p>
  
  <pre><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.
     }
  });
  </code></pre>