jquery - クリック時にセレクターにjQueryでアイコンを追加します

Question

質問がクリックされたときに回答を表示するように設定されたFAQページがあります。これは、同じ設定のjsFiddleです。答えが表示されたら上向きの三角形を追加したいのですが、正しく機能しません。純粋なCSSからjQueryまですべてを試しましたが、正しく機能させることができません。何か案は？

HTMLは次のとおりです。

<div id="faqs">
    <h3 class="question">Question 1? <span class="faqsIcon" aria-hidden="true" data-icon="&#9660;"></span></h3>
    <div>
        <p class="answer">Answer 1</p>
    </div>
    <h3 class="question">Question 2? <span class="faqsIcon" aria-hidden="true" data-icon="&#9660;"></span></h3>
    <div>
        <p class="answer">Answer 2</p>
    </div>
</div>

そしてここにjQueryがあります:( http://davidwalsh.name/jquery-slidersから）

$(document).ready(function() {  
    $('#faqs h3').each(function() {
        var tis = $(this), state = false, answer = tis.next('div').slideUp();
        tis.click(function() {
            answer.slideToggle(state);
            tis.toggleClass('active', state);
            $(this).find('span.faqsIcon').data('data-icon',"▲");
        }); // end click function
    }); // end faqs a_function
}); // end ready

Answer 1

このCSSを使用できます：

.question.active:before {
    content: "\25B2  ";
    padding-right: 3px;
}

質問がアクティブな場合、前に次の三角形があります：▲</ p>

Answer 2

toggleClass呼び出しのflaseパラメーターを削除します。

tis.toggleClass('active');

jsFiddleの例

Answer 3

Answer 4

Here is what you want. You can toggle that class, but it may not give you exactly what you want since you'll need 2 classes. I used javascript solely.

I set an attribute active inside each h3 and retreived it every time. Fun fact: Don't put boolean values in because they will be re-interpreted as strings.

if (active) $(this).find('span.faqsIcon').html("▲");
else $(this).find('span.faqsIcon').html("▼");

http://jsfiddle.net/DzrdG/