About javascript showbox,I need some help! online~~

Question

<div id="wrapper">
    <button id="ppp">button</button>
    <div id="content" style="display:none;"></div>
</div>​

if i click the button,the content will be show(open),

if the content is on show(open),when i click document(except the content),the content will be close.

var $ = function (id){ return !id ? null : document.getElementById(id); }

var addEventSimple = function(obj, evt, fn) {
    if (obj.addEventListener){ // W3C
        obj.addEventListener(evt, fn, false);
    }else if (obj.attachEvent) // Microsoft
        obj.attachEvent('on' + evt, fn);
}



var button = $('ppp'),
    content = $('content');


var init = function() {};

init.handleObj = button;
init.showbox = content;    
init.flag = false;
init.allowcls = false;    
init.open = function () {//open the content
        if (this.flag == false) {
            this.showbox.style.display = "block";
            this.flag = true;
            this.allowcls = true;
        }
    };
init.close =  function () { // close the content
        if (this.flag && this.allowcls) {
                this.showbox.style.display = "none";
                this.flag = false;
                this.allowcls = false;
        }
    };
init.load = function() { // button click
        //e = e ||window.event;
        //e.preventDefault();
        if (this.flag) {
            this.close();
        } else {
            this.open();
        }
    };
init.clickClose = function(e) { // document click

        if (!this.allowcls) {
            return;
        }
        e = e ||window.event;
        var target = e.target;
        if (target === this.showbox) { // button
            return;
        }       
         this.close();
};


addEventSimple(button, 'click', function (){
    init.load();//the code run here OK
})// error on here,but i don't know why?
addEventSimple(document, 'click', function (e){
    init.clickClose(e);
})

code in here :http://jsfiddle.net/DCty3/

Answer 1

To toggle element display, you can use function like this:

function toggleDisplay(id) {
    var elem = document.getElementById(id);
    elem.style.display = (elem.style.display != 'none' ? 'none' : '');
}

There is unlimited id toggle script too:

function toggle() {
    for ( var i=0; i < arguments.length; i++ ) {
        var elem = document.getElementById(id);
        elem.style.display = (elem.style.display != 'none' ? 'none' : '' );
    }
}

With jQuery it will be just:

function toggleDisplay(id) {
    $('#' + id).toggle();
}

I like getting fancy with objects, here is another multifunctional method:

var display = {
    show : function() {
        for ( i=0; i < arguments.length; i++ ) {
            document.getElementById(arguments[i]).style.display = '';
        }
    },
    hide : function() {
        for ( i=0; i < arguments.length; i++ ) {
            document.getElementById(arguments[i]).style.display = 'none';
        }
    },
    toggle : function() {
        for ( i=0; i < arguments.length; i++ ) {
            var elem = document.getElementById(arguments[i]);
            elem.style.display = (elem.style.display != 'none' ? 'none' : '' );
        }
    }
};

To use it, do something like this:

display.show('content','content2','content3');
display.hide('content','content2','content3');
display.toggle('content','content2','content3');

For convenience, you can add another function to enable button:

function toggleDisplayButton(bId, cId) {
    document.getElementById(bId).onclick = (function() {
        toggleDisplay(cId);
    });
}
window.onload = (function() {
    toggleDisplayButton('ppp','content');
});

To enable function, when user clicks "outside" the box, and it closes, there is used an easy trick, by creating another element in background, that covers all area around:

<div id="wrapper">
    <button id="ppp">button</button>
    <div id="outerBox" style="display:none;"></div>
    <div id="content" style="display:none;">1</div>
</div>

CSS should make your container relative positioned and "trick box", absolutely positioned, with maximum size of screen, and z-indexed under container like this:

#content{width:100px;height:100px;background-color:#efefef;border:1px solid #555555;z-index:56;position:relative;}
#outerBox{width:100%;height:100%;position:absolute;top:0;left:0;z-index:55;}

And make it work like this:

var display = {
    toggle : function() {
        for ( i=0; i < arguments.length; i++ ) {
            var elem = document.getElementById(arguments[i]);
            elem.style.display = (elem.style.display != 'none' ? 'none' : '' );
        }
    }
};
function toggleBox() {
    document.getElementById('ppp').onclick = (function() {
        display.toggle('content','outerBox');
    });
    document.getElementById('outerBox').onclick = (function() {
        display.toggle('content','outerBox');
    });
}
onload = function() {
    toggleBox();
}

The result looks like this.