Javascript 常见问题解答切换div显示/隐藏&x2B；更改链接文本

我看了/读/搜索了许多教程，但没有运气。 我坚持

我正在尝试使用JS（可能仅限于CSS）将toogle协调效果应用于div，而不针对div

有两个选项可显示内容：

一个问题打开/另一个问题关闭

每个问题可以单独打开/关闭

我不介意，你选择哪个选项来解决这个问题

I无法将任何atribute更改为ID元素（例如ID=“div1”，ID=“div2”，…）

我的目标是制作类似于图片中的内容：

HTML: JsFiddle： 解决方案： （将

show

放在

boxTitle

div之后）

代码： }))

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

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

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

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

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