jQuery UI Accordion Callback and Dynamic Content Height

Posted on 03 July 2008 by Johannes Fahrenkrug. Tags: JavaScript Programming jquery
This is just a quick note. I'm using jQuery (via the Google Ajax Libraries API) and jQuery UI Accordion in an OpenSocial application. I need to know which accordion page is about to show and I need the accordion to dynamically change height according to the new contents. So this is how you do it: First your HTML markup...
<div id="accordion">
 <ul id="files-accordion" class="ui-accordion-container" style="padding-top: 10px; width: 550px; clear: both;">
   <li><a href="javascript: void(0)" class="ui-accordion-link">Images</a>
     <div id="files-Image">Loading...</div>
   </li>
   <li><a href="javascript: void(0)" class="ui-accordion-link">Videos</a>
     <div id="files-Video">Loading...</div>
   </li>
   <li><a href="javascript: void(0)" class="ui-accordion-link">Files</a>
     <div id="files-File">Loading...</div>
   </li>
 </ul> 
</div>
And this is how you'd turn it into a nice accordion:
$('#accordion > ul').accordion({ 
  clearStyle: true,
  autoHeight: false
}).bind("accordionchange", function(event, something, ui) {
  console.dir(ui.newHeader); // jQuery, activated header
  console.log(ui.newHeader[0].id); //this has the id attribute of the header that was clicked
  doSomething(ui.newHeader[0].id);
});
Note that "ui" is the 3rd, not the 2nd parameter of the event callback. Within that callback you can call some function that will dynamically load content into the selected accordion pane, maybe like this:
var doSomething = function(paneId) {
  $('#' + paneId).html('My dog\'s breath smells like dog food');
};
You can basically put any attribute you want into the <a> tag within the <li> element and access it via the dot notation in your callback (ie ui.newHeader[0].someAttributeOfMyChoice). Enjoy!

Comments

Johannes Fahrenkrug said...

That's good to know, Richard, thank you! It would be worth pointing that out in the docs, I guess ;-)

July 03, 2008 03:02 PM

Richard D. Worth said...

Great article.

Re: "Note that "ui" is the 3rd, not the 2nd parameter of the event callback."

This was a regression in 1.5.1. Just letting you know it should change (be fixed) to be the 2nd parameter in the next release.

July 03, 2008 02:56 PM

Comments

Please keep it clean, everybody. Comments with profanity will be deleted.

blog comments powered by Disqus