Выпадающий список

@Omion · Регистрация: 19.05.2015

Author24 — интернет-сервис помощи студентам

Доброго времени суток. Делаю выпадающий список. Есть вопрос, по нажатию на "Arrow" открывается блок с ответом на вопрос. В моем случае блок rxz20 открывается.

HTML5

<div class="wrapCont col-lg-10 col-md-10">
            <h2 class="RBO48 rxz18">ОСНОВНЫЕ</h2>
            <div class="rxz19">
                <h3 class="RBO24">QUestion</h3>
                <!-- /.RBO24 -->
                <div class="arrow"></div>
                <!-- /.arrow -->
                <div class="rxz20">
                    <p class="RL18">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa debitis dolorem eius et eveniet fugit hic, in laboriosam, libero mollitia neque nulla officia omnis saepe sint ullam, vero voluptas! Magni!</p>
                    <!-- /.RL18 -->
                </div>
            </div>
            <div class="rxz19">
                <h3 class="RBO24">QUestion</h3>
                <!-- /.RBO24 -->
                <div class="arrow"></div>
                <!-- /.arrow -->
                <div class="rxz20">
                    <p class="RL18">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa debitis dolorem eius et eveniet fugit hic, in laboriosam, libero mollitia neque nulla officia omnis saepe sint ullam, vero voluptas! Magni!</p>
                    <!-- /.RL18 -->
                </div>
            </div>
            <!-- /.RBO48 RXZ18 -->
        </div>

Сумел написать такую чтуку:

Javascript

    $(document).ready(function(){
        $(".rxz20").hide();
        $('.arrow').click(function(){
            $(".wrapCont").siblings().find(".rxz20:visible").slideUp("slow");
            $(this).parent().find(".rxz20").slideToggle("slow");
        });
    });

Если дважды нажать на arrow, блок закроется и снова откроется. Нужно чтоб просто закрылся.
Заранее спасибо.
Сори за дурацкий класс RXZ, без понятия как называется такой эффект.

@rodigy · 20.05.2017, 22:30

Сообщение от Omion

Если дважды нажать на arrow, блок закроется и снова откроется. Нужно чтоб просто закрылся.

Класс rxz20 можно скрыть через css, вместо $(".rxz20").hide();
Ну и вообще код можно упростить

Javascript

    $(document).ready(function(){
        $('.arrow').click(function(){
            $(".wrapCont").find(".rxz20").slideUp("slow");
            $(this).parent().find(".rxz20").slideDown("slow");
        });
    });

Добавлено через 53 минуты
Кстати, если вы используете bootstrap вместе с его js плагинами, то там это уже все реализовано

@Omion · 21.05.2017, 00:48 **[ТС]**

rodigy, ссылочку можно? Не нахожу.

@rodigy · 21.05.2017, 01:06

Omion, вот если вы об этом

@Omion 190 / 55 / 12 Регистрация: 19.05.2015 Сообщений: 352
	21.05.2017, 00:48 [ТС]	3
	rodigy, ссылочку можно? Не нахожу. 0

@rodigy 90 / 40 / 17 Регистрация: 24.10.2015 Сообщений: 574
	21.05.2017, 01:06	4
	Omion, вот если вы об этом 1