常见问题切换div显示/隐藏+更改链接文本

Question

I watched/read/search many tutorials, but with no luck. I stick with this tutorial .

I am trying to apply toogle acordion effect with JS (possibly CSS only) without targeting to divs.

There are 2 options to show content:

1. One question open / other closed
2. Each question can be open / close separatly

I don't mind, which option you choose to solve this problem.

I can't change any atribute to ID elements (eg id="div1", id="div2", ...)

My goal is to make something like in picture:

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>   

My try JS:

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

JsFiddle:

JsFiddle example

SOLUTION:

( put <button>show</button> after boxTitle div )

Code:

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