Jquery sliding切换多个滑动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");
        });

    });
});​