содержимое сворачиваемого заголовка с помощью JavaScript

Question

содержимое сворачиваемого заголовка с помощью JavaScript

0

я боюсь писать соответствующий javascript, чтобы свернуть и расширить мой контент

Посмотреть:

<div>
    <h3 id="roleHeader" class="roleHeader collapsible">Title</h3>
    <div>Content to display to users</div>
</div>

JavaScript:

$(document).ready(function() {
            //collapsible management
            $('.collapsible').collapsible({
            });
        });

Masriyah 09 окт. 2013, в 05:45

Источник

0

какой используется collapsible плагин? Вы ищете виджет аккордеона?
Arun P Johny 09 окт. 2013, в 02:58
0

Вы уверены, что не имеете в виду «аккордеон»?
DevlshOne 09 окт. 2013, в 02:59

Теги:

javascript

jquery

2 ответа

Ещё вопросы

какой используется collapsible плагин? Вы ищете виджет аккордеона?
Вы уверены, что не имеете в виду «аккордеон»?

Arun P Johny · Answer 1 · 2013-10-09T01-55-00.000Z

Вы можете реализовать очень легко

jQuery(function($){
    $('.collapsible').click(function(){
        $(this).next().stop(true, true).slideToggle();
    }).next().hide()
})

Демо: скрипка

MCSharp · Answer 2 · 2013-10-09T00-58-00.000Z

Вероятно, вы ищете slideToggle. Эта функция будет переключаться между сдвигом содержимого вверх и вниз.

попробуй это

   $(document).ready(function() {
        $('.collapsible').click(function(){
            $(this).slideToggle(500);
        });
    });

500 - скорость анимации.

Вы также можете настроить таргетинг на объект, который хотите скрыть и показать. Либо дайте ему Id, класс, либо настройте его специально с помощью jQuery. Здесь, когда вы нажимаете на все, что имеет класс collapsible, следующий div будет скрываться и показывать.

    $(document).ready(function() {
        $(".collapsible").click(function(){
            $(this).next("div").slideToggle(500);
        });
    });

Если вам нужно, чтобы анимация остановилась, когда вы нажмете ее снова, чтобы предотвратить эффект прыжка, добавьте .stop(true) перед эффектом

    $(document).ready(function() {
        $(".collapsible").click(function(){
            $(this).next("div").stop(true).slideToggle(500);
        });
    });