Jquery Slide - переключение нескольких скользящих div - PullRequest
Новая
       25

Jquery Slide - переключение нескольких скользящих div

0 голосов
/ 28 марта 2012

Я довольно долго просматриваю и все еще не нашел подходящий ответ. Я хочу, чтобы мои скрытые элементы 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.

спасибо

1 Ответ

0 голосов
/ 28 марта 2012

Как это ? 

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

    });
});​
...