How to make multiple divs slidetoggle with changing arrow

Question

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.

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.

Any help will be greatly appreciated.

Following is the CSS:

#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;
 }

Here's the attempted javascript and jQuery:

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");
  });
});

And here's the HTML

<div id="header_background" >
<img id="expand_arrow" alt="" src="images/collapse-arrow.png" onclick="chngimg()">
<div class="sub_header" onclick="chngimg()">header 1</div>
</div>
<div id="section" style="display:none">
text 1
</div>

<div id="header_background" >
<img id="expand_arrow" alt="" src="images/collapse-arrow.png" onclick="chngimg()">
<div class="sub_header" onclick="chngimg()">header 2</div>
</div>
<div id="section" style="display:none">
text 2
</div>

<div id="header_background" >
<img id="expand_arrow" alt="" src="images/collapse-arrow.png" onclick="chngimg()">
<div class="sub_header" onclick="chngimg()">header 3</div>
</div>
<div id="section" style="display:none">
text 3
</div>

Answer 1

Look for your next section of the header clicked like so. And change your id for class because ID need to be unique

$(".header_background").click(function(){
    $(this).nextAll(".section:first").slideToggle("slow");
});

Answer 2

It's only working for the first set of elements because you're using IDs, and IDs have to be unique within the document (page). You could change to using classes and perform some simple DOM traversal to get the corresponding section based on the header that was clicked. Something like this:

 $(document).ready(function() { $('.header_background').click(function(e) { $(this).next('.section').slideToggle('slow'); var img = $(this).find('img.expand_arrow')[0]; // the actual DOM element for the image if (img.src.indexOf('expand-arrow.png') != -1) { img.src = 'images/collapse-arrow.png'; } else { img.src = 'images/expand-arrow.png'; } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="header_background" > <img class="expand_arrow" alt="" src="images/collapse-arrow.png"> <div class="sub_header">header 1</div> </div> <div class="section" style="display:none"> text 1 </div> <div class="header_background" > <img class="expand_arrow" alt="" src="images/collapse-arrow.png"> <div class="sub_header">header 2</div> </div> <div class="section" style="display:none"> text 2 </div> <div class="header_background" > <img class="expand_arrow" alt="" src="images/collapse-arrow.png"> <div class="sub_header">header 3</div> </div> <div class="section" style="display:none"> text 3 </div>