jQueryUI Accordion - Header Text and Slide

Question

I'm playing around with jQueryUI Accordion for the first time and I'm trying to make simple expanding div, which switches it's header text and sliding to the bottom of the content, when expanded.

I have the default h3 header saying 'More' and I want it to change to 'Less', when the div is expanded and revert to 'More', when it is closed. Also, the header should slide down and stay below the content, when expanded.

I've been searching for 2 days with no luck.

Change text by @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")
  }
});

Slide Header by @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;
});

Now the problem is these two can't be used together. Any idea how to mix them?

Answer 1

You can use activate event to switch your accordion header text:

Triggered after a panel has been activated (after animation completes). If the accordion was previously collapsed, ui.oldHeader and ui.oldPanel will be empty jQuery objects. If the accordion is collapsing, ui.newHeader and ui.newPanel will be empty jQuery objects.

Code:

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

Demo: http://jsfiddle.net/IrvinDominin/r93wn/

Answer 2

if you use accordion with one item and want to slide it when it is active then use collapsible option

In your case $('#accordion').accordion({collapsible:true}); but if u want to slide header down you can use another approach. I have made some sample on JsFiddle for you. Hope it helps.