SlideFadeToggle Demo

HTML

<div id="firstDiv">
    <div id="secondDiv">
        <ul id="accordionMenu">
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a>
                <ul>
                    <li><a href="#">suboption 1</a></li>
                    <li><a href="#">submenu expandable</a>
                    <ul>
                        <li><a href="#">suboption 1</a></li>
                        <li><a href="#">suboption 2</a></li>
                    </ul>
                </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

CSS

a{text-decoration:none;}

JavaScript

$.fn.slideFadeToggle = function(speed, easing, callback) {
    return this.animate({
        opacity: 'toggle',
        height: 'toggle'
    }, speed, easing, callback);
};
  $(this).find("+ ul").slideFadeToggle("500");
  
// Collapse everything but the first menu:
$("#accordionMenu  li  a").not(":first").find("+ ul").slideUp(1);

// Expand or collapse:
$("#accordionMenu  li  a").click(function() {
  
});