常見問題切換div顯示/隱藏+更改鏈接文本

Question

我看過/讀過/搜索過很多教程，但是沒有運氣。 我堅持使用本教程 。

我正在嘗試對JS（可能僅CSS）應用toogle acordion效果， 而不定位到div。

有兩種顯示內容的選項：

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

JsFiddle：

JsFiddle示例

解：

（將<button>show</button> boxTitle div之后）

碼：

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

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

}）;

Answer 1

$(this).parent().next('.toggle').slideToggle();