JavaScript Module - Show/Hide on click

JavaScript Module - Show/Hide on click

HTML

<a href="#" id="clickHere">Click here to toggle visibility</a>

<div id="foo">This is foo</div>

CSS

#foo {display: none;}

JavaScript

var s;
ShowHideWidget = {
    
    settings : {
       clickHere : document.getElementById('clickHere'),
       foo       : document.getElementById('foo')
    },
    
    init : function() {
        //kick things off
        s = this.settings;
        this.bindUIActions();
    },
    
    bindUIActions : function() {
        //Attach handler to the onclick
        /*
        s.clickHere.onclick = function() {
            ShowHideWidget.toggleVisibility(s.foo);
            return false;
        };
        */
        ShowHideWidget.addEvent(s.clickHere, 'click', function() {    
            ShowHideWidget.toggleVisibility(s.foo);
        });
    },
    
    addEvent : function(element, evnt, funct) {
        //addEventListener is not supported in <= IE8
        if (element.attachEvent) {
            return element.attachEvent('on'+evnt, funct);
        } else {
          return element.addEventListener(evnt, funct, false);
        }
    },
        
    toggleVisibility : function(id) {
        if(id.style.display == 'block') {
          id.style.display = 'none';
        } else {
          id.style.display = 'block';
       };
    }
    
};

(function() {
    ShowHideWidget.init();
})();