jquery ui - jQueryUI Accordion - Header Text and Slide -

I'm playing with jQueryUI Accordion for the first time and I'm trying to make a simple expanding diva, which Switches the header text and sliding in the lower part of the content, when the extension is done.

I have a default H3 header which is saying 'more' and I want to change it to 'less' when the div is expanded and returned 'more', when it is closed .

I am searching for 2 days with no luck.

Change the text by @ Irvin Dominin alias Edward

  $ (function () {$ ("#accordion") .accordion ({header: 'h3', Collapsible: true, active: false, activate: function (event, ui) {text ("extra")}};  

by slider header @ vitaliy zadorozhnyy

 
 Header = $ ('#Ardion H3'); Header. (Function () {var panel = $ (this) .prev (); var isOpen = panel.is (': visible') ; $ (This) .text (! IsOpen? 'Less': 'more'); panel [isOpen? 'SlideUp': 'slideDown'] (); return false;});  

< P> Now the problem is that these two can not be used together. Join them?

You can use the event to switch your header header text:

triggered after a panel was activated (after the animation was over). If the Approx was already collapsed, then ui.oldHeader and ui.oldPanel would be empty jQuery objects. If Epicarian If it's broken, then the UI NEHDER and UI NEPANEL will have empty jQuery objects.

code:

  $ ('#Adrian') author (active: function (Event, UI) {ui.newHeader.find (".cc. Accordion -header "). Text (" low ") ui.oldHeader.find (". Accordion-header "). Text (" more ")}});  

Demo: