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"

<h4>Section A<span>Down Arrow</span></h4>

..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

Answer 2

I have using CSS border - Arrow

JS

$('.accordion').each(function () {
        var $accordian = $(this);
        $accordian.find('.accordion-head').on('click', function () {
            $accordian.find('.accordion-body').slideUp();
            if (!$(this).next().is(':visible')) {
                $(this).next().slideDown();
                   $('h4 span',this).text("Up Arrow");
            }else{
                $('h4 span',this).text("Down Arrow");
            }
        });
    });

added CSS

.arrow {
    float: right;
    width: 0px;
    height: 0px;
    margin-top: 23px;
    border: 10px solid transparent;
    margin-top: 21px;
    border-top-color: #F3F3F3;
}
.accordion-head.open .arrow {
    margin-top: 11px;
    border-bottom-color: #F3F3F3;
    border-top-color: transparent;
}

DEMO HERE

DEMO 2