在簡單的手風琴小部件中上下切換箭頭

Question

我遵循了一些教程，然后創建了一個簡單的手風琴小部件，如您在此小提琴中所見，它可以正常工作

但是，我試圖在關閉該部分時添加一個向下箭頭，並在打開該部分時添加一個向上箭頭-在手風琴中每個選項卡的頭部的右端，如下圖所示：

這是箭頭字體代碼：

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

這是我嘗試過的方法，默認情況下使用CSS添加了向下箭頭：

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

這很好地添加了箭頭，但是現在我希望它在打開該節時用向上的箭頭替換該箭頭，我不知道該怎么做！ 我嘗試添加以下CSS並使用JavaScript對其進行切換，但此操作無效：

.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');
            }
        });
    });

Answer 1

我使用CSS邊框-箭頭

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");
            }
        });
    });

添加了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;
}

此處演示

演示2

Answer 2

我已經制作了一個簡單的JQuery解決方案來使其正常工作。 我確定您可以對其進行優化，但是至少它朝着正確的方向發展。

在抬頭中，H4我在跨度中添加了“箭頭文字”

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

..更改了跨度的css以使其向右浮動

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

最后添加了一點JQuery來更改文本

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

JSFiddle