Simple accordion style menu with YUI

I couldn't find a simple reference for the popular "accordion" style fold out menus with the YUI animation libraries (maybe because it is so easy!). Only traps are setting the overflow properties of the fold-out div, and the various DOM height elements.

<script src=""></script>
<script src=""></script>

<script type="text/javascript">

function swap_div(div_name) {
 var div = document.getElementById(div_name);
 var to_height = (div.offsetHeight == 0) ? div.scrollHeight : 0;
 var from_height = (div.offsetHeight == 0) ? 0 : div.scrollHeight;
 var ease_type = (from_height == 0) ? YAHOO.util.Easing.easeOut : YAHOO.util.Easing.easeIn;
 var new_status = (from_height == 0) ? "collapse" : "expand";
 var anim = new YAHOO.util.Anim(div_name, { height: {to: to_height, from: from_height} }, 0.5, ease_type);


 document.getElementById(div_name+"_status").innerHTML = new_status;


<div id="status">
  <a id="expand_me_status" href="#" onclick="javascript:swap_div('expand_me');return false">expand</a>

<div id="expand_me" style="overflow:hidden; height: 0px; background:#eee">
  <p>Hello, this is some text to be expanded out!</p>

And here's the example in action


Hello, this is some text to be expanded out!

A more advanced version might use the callbacks to regulate the swapping of the expand link, but with short swipe times (as one would want from a UI perspective) this isn't really an issue.

In related news, has had a bit of an overhaul (and includes expanding menus).