$(function() {

    // hide via JS instead of CSS for compat with lack of JS
    $('div#content div.options').hide();

    $('a.drop').click(function(event) {
    
        event.preventDefault();

        targetClass = $(this).attr('id');

        // assign objects
        var outerdiv = $('div#content div.' + targetClass);
        var innerdiv = $('div#content div.' + targetClass + ' > div');

        // check if inner div is visible so we know if we're expanding or retracting
        if (innerdiv.is(':visible')) {

            // we're retracting, so make height absolute to prevent
            // slide animation from hiccuping when the inner div disappears
            outerdiv.css('height', outerdiv.height()+'px');
            outerdiv.css('width', outerdiv.width()+'px');

            innerdiv.fadeOut('slow', function() {

                outerdiv.hide('slow');

            });

        } else {

            outerdiv.show('slow', function() {

                innerdiv.fadeIn('slow');

            });

            // hide our inner div asynchronously with the slide
            // down animation
            innerdiv.hide();

        }

    });

});