title: How to make multiple divs slidetoggle with changing arrow
body: <p>I'm very new to javascript and jQuery and has now got completely stuck despite trying various options. I'm trying to create a expand/collapse section with multiple divs. I would like each div to open and close seperately, with an arrow at the side pointing up or down, depending whether the content is expanded or collapsed. </p>
  
  <p>From the code I have written below, only the first div works correctly. The only thing which happen When you click on the two other divs, is that the arrow in the first div change.</p>
  
  <p>Any help will be greatly appreciated.</p>
  
  <p>Following is the CSS:</p>
  
  <pre><code>#header_background {
  background-image: url(header-background.png);
  width:748px;
  height:43px;
  margin-left: -17px;}
  
  #expand_arrow {
  display: inline-block;
  width: 17px;
  height: 18px;
  float:left;
  margin-left:20px;
  padding-left:0px;
  padding-top:11px;
  background-repeat:no-repeat; }  
  
  .sub_header {
  color:#204187;
  font-weight:bold;
  font-size:16px;
  vertical-align:middle;
  padding-left:4px;
  padding-top:12px;
  float:left;
  text-decoration:none;
   }
  </code></pre>
  
  <p>Here's the attempted javascript and jQuery:</p>
  
  <pre><code>function chngimg() {
      var img = document.getElementById('expand_arrow').src;
      if (img.indexOf('expand-arrow.png')!=-1) {
          document.getElementById('expand_arrow').src  = 'images/collapse-arrow.png';
      }
       else {
         document.getElementById('expand_arrow').src = 'images/expand-arrow.png';
     }
  }
  
  
  $(document).ready(function(){
    $("#header_background").click(function(){
      $("#section").slideToggle("slow");
    });
  });
  </code></pre>
  
  <p>And here's the HTML</p>
  
  <pre><code>&lt;div id="header_background" &gt;
  &lt;img id="expand_arrow" alt="" src="images/collapse-arrow.png" onclick="chngimg()"&gt;
  &lt;div class="sub_header" onclick="chngimg()"&gt;header 1&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="section" style="display:none"&gt;
  text 1
  &lt;/div&gt;
  
  &lt;div id="header_background" &gt;
  &lt;img id="expand_arrow" alt="" src="images/collapse-arrow.png" onclick="chngimg()"&gt;
  &lt;div class="sub_header" onclick="chngimg()"&gt;header 2&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="section" style="display:none"&gt;
  text 2
  &lt;/div&gt;
  
  &lt;div id="header_background" &gt;
  &lt;img id="expand_arrow" alt="" src="images/collapse-arrow.png" onclick="chngimg()"&gt;
  &lt;div class="sub_header" onclick="chngimg()"&gt;header 3&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="section" style="display:none"&gt;
  text 3
  &lt;/div&gt;
  </code></pre>