Can this be converted to work with multiple (20+) instances?

Question

I'm using this code for a faq. You click on the img and it opens the box, clicking on the img also closes the box. The img switches on each click. So far I have not been able to convert this to work with more than 1 section. I know nothing about jquery or javascript, but understand some programming concepts. I have been trying for 4 hours with no luck. I need your help!

$(document).ready(function() {
$('#expandcontract').toggle(
function(){ // you can add as much here as you'd like
$('#box').show('slow');
$('#imgArrows').attr("src","images/up.png");
}, function() { // same here
$('#box').hide('slow');
$('#imgArrows').attr("src","images/down.png");
});
});

Answer 1

IDs should only be provided to one element. You'll want to assign the elements class, then retrieve all the elements with the appropriate class and add a toggle handler to them.

Answer 2

After changing all the Id's to classes, you probably want something like this:

$(document).ready(function() {
    $('.expandcontract').toggle(
        function() {
            $('.box',this).show('slow');
            $('.imgArrows',this).attr("src","images/up.png");
        }, function() {
            $('.box',this).hide('slow');
            $('.imgArrows',this).attr("src","images/down.png");
        }
    );
});

Assuming that your HTML is something like:

<div class="expandcontract">
    <div class="box" />
    <div class="imgArrows" />
</div>
<div class="expandcontract">
    <div class="box" />
    <div class="imgArrows" />
</div>
<div class="expandcontract">
    <div class="box" />
    <div class="imgArrows" />
</div>