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 when the section is closed and an upper arrow when the section is open - at the right end of the head of each tab in the accordion, just as the image below shows:

Here is the arrows font codes:

.icon-arrowUp:before {
   content: "\f077";
}
.icon-arrowDown:before {
   content: "\f078";
}

Here is what I have tried, I added the downward arrow by default using CSS:

.accordian .accordian-head:before {
        font-family: 'icons';
        content: "\f078";
        float: right;
    }

This added the arrow nicely, however now I want it to replace that arrow with the upward one when the section is open, I have no clue what to do! I tried to add the following CSS and toggle it with JavaScript, but it didn't work:

.accordian .accordian-head .accordian-head-active:before {
        font-family: 'icons';
        content: "\f077";
        background-color: red;
    }


//Accordian
    $('.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();
                $(this).addClass('accordian-head-active');
            }
        });
    });

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 when the section is closed and an upper arrow when the section is open - at the right end of the head of each tab in the accordion, just as the image below shows:

Here is the arrows font codes:

.icon-arrowUp:before {
   content: "\f077";
}
.icon-arrowDown:before {
   content: "\f078";
}

Here is what I have tried, I added the downward arrow by default using CSS:

.accordian .accordian-head:before {
        font-family: 'icons';
        content: "\f078";
        float: right;
    }

This added the arrow nicely, however now I want it to replace that arrow with the upward one when the section is open, I have no clue what to do! I tried to add the following CSS and toggle it with JavaScript, but it didn't work:

.accordian .accordian-head .accordian-head-active:before {
        font-family: 'icons';
        content: "\f077";
        background-color: red;
    }


//Accordian
    $('.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();
                $(this).addClass('accordian-head-active');
            }
        });
    });

• javascript
• jquery
• html
• css

• 1 HERE is something for you to play with – Batu.Khan Commented Apr 14, 2014 at 10:53
• @BatuZet this worked! but how can I replace it with my arrows? I can't do it... I tried adding the codes but it just won't do it. Please advice – Leo Commented Apr 14, 2014 at 11:54
• If you look at .accordion .accordion-head span style youre gonna see the background-image i've used for. Check it and change it accordingly to whatever u like. – Batu.Khan Commented Apr 14, 2014 at 11:58
• I just tried: jsfiddle/x5hPR – Leo Commented Apr 14, 2014 at 11:58
• I tried something like: $accordian.find('.accordian-head').css(":before",'\f078') – Leo Commented Apr 14, 2014 at 11:59

2 Answers 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

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