Question

I have about 40 questions on a Question/Anwser script now I want to hide all the other messages then the one with the id clicked but the windows overlap, So how would I hide all the Other ids and show just one with Javascript?

Answer 1

The following examples will vary depending on your HTML structure. They are meant as examples, not solutions for your specific situation.

Changing the style of a single element can be done rather quickly:

document.getElementById("foo").style.display = "none";

You could hide all others like this:

var myDivs = document.getElementsByTagName("DIV");
for (var i = 0; i < myDivs.length; i++) {
  if (myDivs[i].id != "foo") {
    myDivs[i].style.display = "none";
  } else {
    myDivs[i].style.display = "block";
  }
}

If you’re open to using a framework, like jQuery, you could do the same thing even quicker:

$(".question .title").click(function(){
 $(this)
   .next().slideDown()
   .closest(".question").siblings()
   .find(".body").slideUp(); 
});​

Online Demo of jQuery: http://jsbin.com/opisa/edit