Add [+] plus [-] minus to collapsible tab

Question

Hi,
I think this is an easy one, but I have searched high and low to find out how to accomplish this task .
I want to add a small [+] symbol to the collapsable panel tab to give a visual aid showing the tab can be clicked to expand it.  Then, (and this is the bit that requires the code) once expanded, the symbol should change to a [-] to close the collapsible panel.  Other than the symbol, there will be some title text.
You've seen and used it everywhere these days, but I don't know how to add it to my css or js.
Can someone please point me in the right direction?
There must be a resource out there, maybe I'm just using the wrong search criteria when looking.  You don't want to know the permutations I've tried on Google and on here.
Thanks!

Answer 1

Thanks Beth,
That is a useful tutorial.
However, I had since found some information on this and made my css as follows.  Instead of using padding, I used text-intent.  I also put most of the code in the CollapsiblePanelTab to save duplicating.  Does that follow standards?
.CollapsiblePanelTab {
    font: bold 0.7em sans-serif;
    background-color: #DDD;
    border-bottom: solid 1px #CCC;
    margin: 0px;
    padding: 2px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    text-indent:22px; /* to ensure the text does not overlap the image in .CollapsiblePanelOpen .CollapsiblePanelTab below */
    background-repeat: no-repeat;   /* refers to the image in .CollapsiblePanelOpen .CollapsiblePanelTab below */
    background-position: 8px center; /* position the image in .CollapsiblePanelOpen .CollapsiblePanelTab below */
.CollapsiblePanelOpen .CollapsiblePanelTab {
    background-color: #EEE;
    background-image: url(../../images/b_minus.png);
.CollapsiblePanelClosed .CollapsiblePanelTab {
    background-color: #EFEFEF;
    background-image: url(../../images/b_plus.png);
You can see the result in the Collapsible Panel at http://yabbox.com/spry.php