jQueryUI Accordion-текст заголовка и слайд

Я впервые играю с аккордеоном jQueryUI и пытаюсь сделать простой расширяющийся div, который переключает текст заголовка и скользит в нижнюю часть содержимого, когда он расширяется.

У меня есть заголовок h3 по умолчанию, говорящий "больше", и я хочу, чтобы он изменился на "меньше", когда div расширяется и возвращается к "больше", когда он закрывается. Кроме того, заголовок должен скользить вниз и оставаться ниже содержимого, когда он расширен.

Я искал в течение 2 дней без каких-либо удача.

Изменить текст @Irvin Dominin aka Edward 

$(function() {
  $( "#accordion" ).accordion({ 
    header: 'h3', 
    collapsible: true, 
    active: false, 
    activate: function (event, ui) {
    ui.newHeader.find(".accordion-header").text("Less")
    ui.oldHeader.find(".accordion-header").text("More")
  }
});

Заголовок слайда @vitaliy zadorozhnyy 

var headers = $('#accordion h3');
headers.click(function () {
    var panel = $(this).prev();
    var isOpen = panel.is(':visible');

    $(this).text(!isOpen ? 'Less' : 'More');

    panel[isOpen ? 'slideUp' : 'slideDown']();
    return false;
});

Теперь проблема в том, что эти два не могут быть использованы вместе. Есть идеи, как их смешать?

2 2
jquery-ui-accordion

2 ответа:

Вы можете использовать activate событие для переключения текста заголовка аккордеона:

Срабатывает после активации панели (после анимации завершает). Если аккордеон был предварительно свернут, ui.старожил и ui.oldPanel будет пустым объектом jQuery. Если аккордеон есть рушится, пользовательского интерфейса.newHeader и пользовательский интерфейс.newPanel будет пустым объектом jQuery.

Код: 

$('#accordion').accordion({
    activate: function (event, ui) {
        ui.newHeader.find(".accordion-header").text("Less")
        ui.oldHeader.find(".accordion-header").text("More")
    }
});

Демо: http://jsfiddle.net/IrvinDominin/r93wn/

1

Если вы используете аккордеон с одним элементом и хотите сдвинуть его, когда он активен, то используйте складной Вариант

В вашем случае $('#accordion').accordion({collapsible:true}); но если вы хотите сдвинуть заголовок вниз, вы можете использовать другой подход. Я сделал для вас некоторый образец на JsFiddle. Надеюсь, это поможет.

0