I wrote this simple jQuery toggler/accordion to work with tables and the class name control…nothing new here just interesting to see the accordion applied to a table.

Check out the showText, no images ma! (i.e. I use numerical entities for the arrows).

/*
 *
 * @author C Maynard
 *
 */

var pageTest = (function(){
    var that = {};

    that.init_hideDisplayGroup = function() {

        // choose text for the show/hide link
        var showText='▶';    // ▶
        var hideText='close me';

        // initialize the visibility check
        var is_visible = false;

        // append show/hide links to the thead's
        $('.control thead tr th').append(' '+showText+'');
        $('.toggleLink').css({
            'float': 'right',
            'margin-right' : '10px',
            'color' : '#999999',
            'font' : '14pt/1.5 sans-serif !important',
            'text-decoration' : 'none'
        });

        // add the toogle class and hide them
        $('.control tbody').addClass('toggle');
        $('.toggle').hide();

        $('a.toggleLink').click(function() {
            // switch visibility
            is_visible = !is_visible;

            $(this).html ($(this).html().toLowerCase()==hideText.toLowerCase() ? showText : hideText);
            $(this).parent().parent().parent().next('.toggle').toggle('fast');         

            return false;
        });

    };

    return that;

})();

• BROWSE / IN TIMELINE
• « Instant jQuery 1.4

• BROWSE / IN code jQuery
• « Instant jQuery 1.4