Jquery Slidetoggle несколько скользящих div

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

а вот мой джаваскрипт

$(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.

Спасибо


javascript jquery show-hide slidetoggle
person user1296747    schedule 27.03.2012    source источник
comment
$(document).ready(function() { // поместите сюда все свои преимущества jQuery. var showText='Нажмите для получения дополнительной информации ►'; var hideText='Скрыть информацию ▼'; $('.content .open').show(); $('.opener').click(function() { $(this).parent().next('.content').slideToggle('slow'); // переключатель видимость $(this).data('is_visible', !$(this).data('is_visible')); // меняем ссылку в зависимости от того, показан элемент или скрыт $(this).html( (!$ (this).data('is_visible')) ? showText : hideText); $('.parent, .child').hide(); });});   -  person user1296747    schedule 29.03.2012

Ответы (1)


arrow_upward
0
arrow_downward

Нравится это?

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

    });
});​
person Sinetheta    schedule 27.03.2012
comment
Я вставил свой новейший код в комментарий ниже, теперь проблема в том, что у меня есть несколько div, закрывающих один при открытии выбранного - person user1296747; 29.03.2012
comment
Я изменил код, чтобы все аккордеоны работали независимо друг от друга. - person Sinetheta; 29.03.2012
comment
Он вообще не открывает div, используя этот код. Ваша помощь приветствуется. - person user1296747; 29.03.2012
comment
извините, не могли бы вы отредактировать свой вопрос, чтобы уточнить, что вы ищете? Что нам нужно знать, так это 1) что находится на странице 2) как вы с ней взаимодействуете 3) каков желаемый результат. - person Sinetheta; 29.03.2012