Cuando Javascript deja de ser imprescindible

Los que llevamos muchos años en el mundo del diseño y programación web, y yo soy el primero que me incluyo, nos parecerá extraño que haya muchísimas cosas en las que ya no necesita usar obligatoriamente código javascript gracias a la evolución del estándar HTML y CSS.

En este artículo explicaremos, como introducción, cómo se puede usar el selector "target" para mostrar y ocultar un bloque de ayuda y, posteriormente, haremos lo mismo usando javascript.

Versión sin JavaScript

Lo primero que definiremos será el código HTML, en el que pondremos los enlaces en una lista sin orden (ul) y bajo ella definiremos cada una de las capas con el "id" asociado a cada enlace interno (los que comienzan por #)

Código HTML:

<ul>
    <li><a href="#informacion1">Mostrar información #1</a></li>
    <li><a href="#informacion2">Mostrar información #2</a></li>
    <li><a href="#informacion3">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>

Hoja de estilos CSS:

.informacion {
    display: none;
}

.informacion:target {
    display: block;
}

La hoja de estilos es extremadamente sencilla. En ella se indica que todos aquellos bloques con clase "informacion" estén por defecto ocultos y que cuando su selector cambie a "target" (cuando se haga clic en el enlace apropiado) se muestren.

Puedes probar este código online aquí: http://jsfiddle.net/OscarGarcia/kcL29z13/

La principal desventaja de este método (aunque interesante) es que cada pulsación que hagamos en un botón se añade al historial de navegación y cuando pulsemos el botón "atrás" del navegador iremos deshaciendo las pulsaciones realizadas.

Versión usando JavaScript

Ahora toca la versión en javascript, en la que el código básicamente es el mismo pero con unas modificaciones que pasaremos a explicar.

Código HTML:

<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>

Hoja de estilos CSS:

.informacion {
    display: none;
}

Código JavaScript:

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;
}

El funcionamiento es bastante sencillo, aunque para complicarlo un poco he querido usar XPath. El mismo código hubiera funcionado correctamente enumerando las etiquetas "div" con getElementsByTagName o, mejor aún, con getElementsByClassName.

Agregamos un evento "onclick" a cada enlace, llamando a la función "showMore" (sí, está en inglés porque este código proviene de una ayuda que presté en stackoverflow). Hay que fijarse que uso "return showMore(this)" por dos motivos:

• Devolviendo, usando "return", un valor "false" cancelará el evento "onclick", evitando que la pulsación termine enviando la página al enlace definido por "href".
• Entregamos el objeto que ha generado el evento "onclick" usando "this" para que en la función showMore sepamos qué enlace es el que hemos pulsado.

La función showMore realiza una búsqueda XPath en el DOM de la página web en busca de todas aquellas etiquetas "div" cuya clase sea "informacion". La etiqueta "div" objetivo (target) que tenemos que activar viene dado en el atributo "href" del enlace pulsado, por lo que sólo queda hacer un bucle while que, por cada elemento encontrado, compare su atributo "id" con el objetivo (target) deseado, cambiando el estilo "display" de la etiqueta a "block" en caso de no coincidir (para mostrar su contenido) y ocultando el contenido con "none" en caso contrario.

Puedes probar este código online aquí: http://jsfiddle.net/OscarGarcia/tL8rjdok/

Ruegos y preguntas

¿Conocéis algo más que se pueda hacer sin javascript?