jQuery UI Accordion Callback and Dynamic Content Height

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