Friday, August 3, 2012

Toggles the visibility of a div by clicking on an expand/collapse image


/**
 * Toggles the visibility of a div by clicking on an expand/collapse image.
 * The obj parameter is the image link and the "id" is the id of the div to
 * toggle.
 * @param obj
 * @param id
 */
function toggle(obj,id) {
    var state = document.getElementById(id).style.display;
        if (state == 'block') {
            document.getElementById(id).style.display = 'none';
            obj.src = 'Images/Expand.png';
            obj.title = 'Click to Expand';
        } else {
            document.getElementById(id).style.display = 'block';
            obj.src = 'Images/Collapse.png';
            obj.title = 'Click to Collapse';
        }
}


// In JSP file add the following:


<img id="invoiceListImg" src="Images/Collapse.png" alt="Collapse"  title="Click to Collapse"
onclick="toggle(this,'divName');"/>

No comments:

Post a Comment