JQuery to hide and show divs with indicator

Question

Using jQuery below to toggle hiding and showing divs of text: how would I add some kind of indicator - like an up and down arrow as a graph - to headers when divs are open or closed? What is the best way to do this? Two images? CSS sprite? And most importantly: how will it be integrated into JS?

I looked at another jQuery, which assigns a random number to each div, and then determines which ones are open and which are closed, and toggles one of the two images. But I use php in the WordPress loop to show posts, and this creates problems with the increase in the loop, so there should be an easier way that does not require changes to the section div name. Thank....

This JS starts the show and hides. Each div can be expanded and expanded independently.

$(document).ready(function() {
  $('div.demo-show:eq(0)> div').hide();  
  $('div.demo-show:eq(0)> h3').click(function() {
    $(this).next().slideToggle('fast');
  });
});

This is the HTML it works with:

<div class="collapser">

<p class="title">Header-1 </p>
<div class="contents">Lorem ipsum</div>

<p class="title">Header-2</p>
<div class="contents">Lorem ipsum </div>

<p class="title">Header-3</p>
<div class="contents">Lorem ipsum</div>

</div>

CSS custom:

.collapser {
margin: 0;
padding: 0;
width: 500px;
}

.title {
margin: 1px;
color: #fff;
padding: 3px 10px;
cursor: pointer;
position: relative;
background-color:#c30;
}

.contents {
padding: 5px 10px;
background-color:#fafafa;
}

Answer 1

You can use the toggleClass method to set the class in the click handler. either up or down. Each class will have a corresponding set of background images.

In the click handler

$('.collapser').toggleClass('up down');

and your html will look like this

<div class="collapser up">
</div>