javascript - faq トグル div 表示/非表示 + リンク テキストの変更

Question

多くのチュートリアルを見たり、読んだり、検索したりしましたが、うまくいきませんでした。私はこのチュートリアルに固執します。

divをターゲットにせずに、JS（おそらくCSSのみ）でtoogleアコーディオン効果を適用しようとしています。

コンテンツを表示するには、次の 2 つのオプションがあります。

1. 1 つの質問をオープン / 他の質問をクローズ
2. 各質問は個別に開いたり閉じたりできます

この問題を解決するためにどのオプションを選択するかは気にしません。

ID 要素の属性を変更できません(例: id="div1"、id="div2"、...)

私の目標は、写真のようなものを作ることです:

HTML:

    <div class="widget widgetFaq clearfix">

    <div class="widgetTitle"> 
        <h2>FAQ</h2> 
    </div>   

    <div class="widgetContent clearfix">   

        <div class="box boxFaq clearfix">                  

            <div class="boxTitle">
                <h3>Question one?</h3>
                <button> show </button>
            </div>

            <div class="boxContent clearfix toggle">                     
                <p>Answer to the question. Answer to the question. Answer to the question. </p>
            </div>

        </div>  

        <div class="box boxFaq clearfix">                  

            <div class="boxTitle">
                <h3>Question second?</h3>
                <button> show </button>
            </div>

            <div class="boxContent clearfix toggle">                     
                <p>Answer to the question. Answer to the question. Answer to the question. </p>
            </div>

        </div>  

    </div>   

</div>   

私の試しJS：

   $(document).ready(function(){ 
    $('button').click(function() {
        $(this).next('.toggle').slideToggle();
    });
});

Jsフィドル:

JsFiddle の例

解決：

( div の<button>show</button>後に置く)boxTitle

コード：

$(document).ready(function() {
$('button').click(function() {
    $(this).next('.toggle').slideToggle();

    if ($(this).text() === '+') {
        $(this).html('-');
    }
    else {
        $(this).html('+');
    }
});

});