The "ID" must be unique, because of it "getElementById" is singular (Element), not plural like getElementsByTagName or getElementsByClassName (Elements).
But you can use getElementsByTagName, getElementsByClassName, xpath or another ways to look for a particular DOM node/s.
https://developer.mozilla.org/en/docs/Introduction_to_using_XPath_in_JavaScript
Edit 2a: Using xpath
It's obvious that if you use a single class for every block it's easiest to use getElementsByClassName. But with xpath you have more power to search into a document for a more complex pattern (a div tag with class "foo" and id that begins with "bar").
Example: http://jsfiddle.net/OscarGarcia/a8jqm636/1/
HTML code:
<ul>
<li><a href="information1" onclick="return showMore(this)">
Show information #1</a></li>
<li><a href="information2" onclick="return showMore(this)">
Show information #2</a></li>
<li><a href="information3" onclick="return showMore(this)">
Show information #3</a></li>
</ul>
<div id="information1" class="information">This is information text #1: This is interesting!<br /><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Icon-OK.jpg/35px-Icon-OK.jpg" alt="OK"/></div>
<div id="information2" class="information">This is information text #2: What happened? Wow!<br /><img src="http://upload.wikimedia.org/wikipedia/commons/d/d5/Face-angel.svg" alt="angel" /></div>
<div id="information3" class="information">This is information text #3: Be happy with CSS!<br /><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Gnome-face-smile-big.svg/92px-Gnome-face-smile-big.svg.png" alt="happy" /></div>
CSS code:
.information {
display: none;
}
JavaScript code:
function showMore(el) {
var nodes = document.evaluate('//div[@class="information"]', document, null, XPathResult.ANY_TYPE, null);
var result = nodes.iterateNext();
var target = el.getAttribute("href");
while (result) {
if (result.getAttribute("id") == target) {
result.style.display = 'block';
} else {
result.style.display = 'none';
}
result = nodes.iterateNext();
}
return false;
}
This code will look for every div tag with class "information" and compare its "id" with the content of "href" attribute of clicked link.
Hope it helps.
Edit 2b: Show/hide information blocks without javascript
Probably you don't need to use javascript at all! This is an example without javascript:
HTML code:
<ul>
<li><a href="#information1">Show information #1</a></li>
<li><a href="#information2">Show information #2</a></li>
<li><a href="#information3">Show information #3</a></li>
</ul>
<div id="information1" class="information">
This is information text #1: This is interesting!<br />
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Icon-OK.jpg/35px-Icon-OK.jpg" alt="OK"/>
</div>
<div id="information2" class="information">
This is information text #2: What happened? Wow!<br />
<img src="http://upload.wikimedia.org/wikipedia/commons/d/d5/Face-angel.svg" alt="angel" />
</div>
<div id="information3" class="information">
This is information text #3: Be happy with CSS!<br />
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Gnome-face-smile-big.svg/92px-Gnome-face-smile-big.svg.png" alt="happy" />
</div>
CSS code:
.information {
display: none;
}
.information:target {
display: block;
}
As you can see, all information blocks are hidden on page load. When you target every block its CSS selector changes to "target", so the block are shown and every other are hidden. When you target another block, again the rest are hidden and only selected is visible.
EDIT 1: Little error on variable assignment.
After reading deeptly I saw a little error with variable assignment:
function showMore(el) {
el.style.display = "none";
document.getElementById('MoreInfo').style.display = 'none'; // ¿none? ¿block?
return false;
}
You mustn't use "==" to assign a value.
el.style.display == "none";
as your first line? Did you meanel.style.display = "none";
? The first one doesn't do anything (it checks if if the display is none and throws away the return value)