title: jquery accordion clicked header img change toggle
body: <p>I have an accordion menu group made up of images. All the sections are closed at start, when one of the accordion sections is clicked/opened I want to change the image source of the just clicked header image and of course change it back later if the section is closed. How can I add this to the accordion? Thank you in advance.</p>
  
  <p>The html and the jquery code: </p>
  
  <pre><code>$(document).ready(function () {
  $("#accordion").accordion({
      collapsible: true,
      active: false,
      header: '.head',
      autoHeight: false,
  });
  </code></pre>
  
  <p>});</p>
  
  <pre><code>&lt;div id="accordion"&gt;
  &lt;div class="head"&gt;&lt;a href="#"&gt;&lt;img id="head1" src="images/Header1_closed.png" border="0" /&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;div&gt;&lt;img src="images/accordPart3.png" /&gt;&lt;/div&gt;
  &lt;div class="head"&gt;&lt;a href="#"&gt;&lt;img id="head2" src="images/Header2_closed.png" border="0" /&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;div&gt;&lt;img src="images/accordPart5.png" /&gt;&lt;/div&gt;
  </code></pre>
  
  <p></p>