Edit in JSFiddle

<ul>
    <li><a href="informacion1" onclick="return showMore(this)">Mostrar información #1</a></li>
    <li><a href="informacion2" onclick="return showMore(this)">Mostrar información #2</a></li>
    <li><a href="informacion3" onclick="return showMore(this)">Mostrar información #3</a></li>
</ul>
<div id="informacion1" class="informacion">
    Texto de información #1: ¡Interesante!<br />
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Icon-OK.jpg/35px-Icon-OK.jpg" alt="OK"/>
</div>
<div id="informacion2" class="informacion">
    Texto de información #2: ¿Qué pasó? ¡Guau!<br />
    <img src="http://upload.wikimedia.org/wikipedia/commons/d/d5/Face-angel.svg" alt="angel" />
</div>
<div id="informacion3" class="informacion">
    Texto de información #3: ¡Sé feliz con CSS3!<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>

.informacion {
    display: none;
}

function showMore(el) {
    var nodes = document.evaluate('//div[@class="informacion"]', 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;
}