Toggle up and down arrows in a simple accordion widget

Question

I have followed few tutorials and then created a simple accordion widget, it works fine as you can see in this fiddle

However, I am trying to add a downward arrow wh

Answer 1

I have made a simple JQuery solution to get this working. Im sure you can refine it, but at least it is going in the correct direction.

In the Head, H4 I have added a span with the "arrow text"

Section ADown Arrow

..Changed the css for the span to float it right

.accordion .accordion-head span {
    float:right
}

and finally added a little JQuery to change the text

...   
if (!$(this).next().is(':visible')) {
$(this).next().slideDown();
    $('h4 span',this).text("Up Arrow");
}else{
    $('h4 span',this).text("Down Arrow");
}
...

JSFiddle