2

Есть скрипт, который раскрывает текст по нажатию на ссылку.
Как сделать так, чтобы по умолчанию один всегда был открыт (первая ссылка)?

$(document).ready(function() {                                                  
    $('.view-source .hide').hide();
    $('.view-source a').on('click', function() {
        $('.view-source .hide').slideUp(500);
        $(this).parent().find('.hide').slideDown(500);
    });
});
<div class="view-source">
    <a href="#">111</a>
    <div class="hide">Спрятанный текст</div>
</div>
<div class="view-source">
    <a href="#">222</a>
    <div class="hide">Спрятанный текст</div>
</div>
<div class="view-source">
    <a href="#">333</a>
    <div class="hide">Спрятанный текст</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

4

1 ответ 1

2

Размещу тогда я ответом. Идея в том, чтобы при загрузке страницы скрывать не все блоки текста, а "все кроме первого":

$(document).ready(function() {
    var $texts = $('.view-source .hide');
    $texts.not(':first').hide();
    $('.view-source a').on('click', function () {
        $texts.slideUp(500);
        $(this).parent().find('.hide').slideDown(500);
    });
});
<div class="view-source">
    <a href="#">111</a>
    <div class="hide">Спрятанный текст</div>
</div>
<div class="view-source">
    <a href="#">222</a>
    <div class="hide">Спрятанный текст</div>
</div>
<div class="view-source">
    <a href="#">333</a>
    <div class="hide">Спрятанный текст</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  • .parent() - достаточно негибкое решение (в случае изменения HTML-структуры блока код может сломаться). Имеет смысл использовать вместо этого .closest('.view-source').
  • Так как элемент с классом hide может быть виден на экране, имеет смысл переименовать класс, дав ему более правильное название для обозначения блока текста. Например, text.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.