Expand and collapse div content in dojo

This is a very nice way to Expand and collapse div content in dojo. Dojo is rich javascript framework used to crete interactive Web Pages

HTML Code

Call onclick=”collapse(‘1’); method on for every div you want to collapse/expand. Parameter “1” is the div number. For div 2 you need to send parameter 2.

JavaScript Code

var openList = new Array();

function collapse(number){
    var wipeNode = "wipeNode" + number;

    if(!isElementExist(number)) {
        openList[number] = 0;
        wipeOut(wipeNode, number);
    }else{
        wipeIn(wipeNode, number);
        openList[number] = 1;
    }
}

function wipeOut(wipeNode, number) {
    var wipeArgs = {
        node: wipeNode,
        duration: 500
    };
    dojo.fx.wipeOut(wipeArgs).play();
    dojo.byId("collapse"+number).innerHTML = "Expand";
    dojo.byId("collapse"+number).style.backgroundImage = "url(resources/theme/images/content/arw_left.jpg)";

}

function wipeIn(wipeNode, number) {
    var wipeTarget = dojo.byId(wipeNode);
    dojo.fx.wipeIn({ node: wipeTarget }).play();
    dojo.byId("collapse"+number).innerHTML = "Collapse";
    dojo.byId("collapse"+number).style.backgroundImage = "url(resources/theme/images/content/arw_down.jpg)";
}

Arrow Images

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.