Jquery Slidetoggle 多个滑动 div

Question

我已经浏览了一段时间，但我仍在寻找相关答案。我希望我的隐藏的 div 都是相同的类来滑动切换，但是当一个滑动另一个打开时关闭。此外，我希望仅更改正在切换的 div 的显示信息/隐藏信息。

这是我的html

<p>
    <a class="opener" href="javascript:slideTogle();">Click Here For Information</a>
</p>
<div class="content">
    <p>If you are looking to purchase your first home, reduce your existing monthly
        repayments, pay off you mortgage early, raise cash for home improvements
        or to pay off debt or even buy a property to let out we are able to assist
        and advise you from start to finish. We have access to a wide range of
        lenders offering independent mortgages to suit you.</p>
    <p>Your home may be repossessed if you do not keep up repayments on your
        mortgage.</p>
    <ul>
        <li>First time Buyers</li>
        <li>Remortgages</li>
        <li>Capital raising</li>
        <li>Debt Consolidation</li>
        <li>Buy To Let</li>
    </ul>
</div>

这是我的 javascript

$(document).ready(function () {
    // put all your jQuery goodness in here.
    $('.content').hide();
    $('.content.open').show();

    $('.opener').click(function () {


        $(this).parent().next('.content').slideToggle(300, function () {
            $(".opener").text($(this).is(':visible') ? "Hide Information" : "Click Here For Information");
        });
    });
});

我是 jquery/javascript 的新手，但我对 php 有基本的了解，并且对 html/css 有很好的了解。

谢谢

Answer 1

喜欢this？

$(document).ready(function () {
    // put all your jQuery goodness in here.

    $('.opener').click(function (e) {
        var $opener = $(this);
        var $content = $opener.parent().next('.content');        

        e.preventDefault();

        $content.toggleClass('open').slideToggle(300, function(){
            $opener.text($content.hasClass('open')?"Hide Information":"Click Here For Information");
        });

    });
});​