implementing show/hide popup box on mouse click

Question

I have implented the show part properly. But how to implement the hide of popup on click of anything on the page? And moreover there is a link, on click of which this will expand and collapse also.

Any help. Thanks.

Answer 1

1. Attach an event hanlder to the popup element. On click of that stop event bubbling.

2. Attach an event handler to document. On click of that hide the popup.

A sample using jQuery

Updated sample

Answer 2

why don't you try this.

function close() {
   document.getElementById("popupBox").style.display="none";
}

In onclick handler, call the above function. For expand and collapse, Mootools provides very simple implementation check it.

Answer 3

function switchElement(elementId) {
   if(document.getElementById(elementId).style.display=="")
   {
   document.getElementById(elementId).style.display="none";
   }
   else
   {
   document.getElementById(elementId).style.display="";
   }
}

expand added to Webbisshh's code.