jQueryUI 아코디언 - 헤더 텍스트 및 슬라이드

Question

저는 처음으로 jQueryUI Accordion을 가지고 놀았습니다. 확장 된 div 텍스트는 머리글 텍스트를 전환하고 내용이 확장 될 때 슬라이딩됩니다.

'기타'를 말하는 기본 h3 헤더가 있고 div가 확장되면 '자세히'로 변경하고 닫히면 '기타'로 되돌립니다. 또한 펼칠 때 헤더가 아래로 내려 가서 내용 아래에 있어야합니다.

나는 행운이없는 2 일간을 검색했습니다. 일명 에드워드

$(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; 
}); 

에 의해 @Irvin Dominin에 의해

변경 텍스트는 이제 문제는이 두 가지를 함께 사용할 수 없습니다입니다. 어떻게 그들을 혼합하는 아이디어?

Answer 1

당신은 당신의 아코디언 헤더 텍스트를 전환 activate 이벤트를 사용할 수 있습니다

는 트리거 패널은 (애니메이션 후 완료)를 활성화 한 후. 아코디언이 이전에 축소 된 경우 ui.oldHeader 및 ui.oldPanel은 빈 jQuery 객체가됩니다. 아코디언이 이면 축소됩니다. ui.newHeader 및 ui.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/

Answer 2

후 사용 collapsible 옵션

귀하의 경우 $('#accordion').accordion({collapsible:true});에서 하지만 u를 아래로 밀어 넣으면 다른 접근법을 사용할 수 있습니다. 나는 당신을 위해 JsFiddle에 몇 가지 샘플을 만들었습니다. 도움이 되길 바랍니다.