En determinadas ocasiones nos puede interesar poner opciones para mostrar información que inicialmente esté oculta. Por ejemplo en un listado de direcciones de empresas para que inicialmente se muestre sólo el listado de nombres y mostrar la información del ítem que escoja ver el usuario.
Podríamos tener algo similar a este código fuente
<ul id="listaEmpresas">
<li class="tituloItem">Empresa 1
<div id="item_1" class="contenidoItem">
<p>Empresa especializada en la elaboración de leporcias a la carta desde hace 6 años </p>
<address>
Dirección:<br />
C/ Salmurriana 12 20345 Bastión, España <br />
Tel. 123455678
</address>
</div>
</li>
<li class="tituloItem">Empresa 2
<div id="item_2" class="contenidoItem">
<p>Desde 1996 lenteja florindes por absoluta franquicia. </p>
<address>
Dirección:<br />
C/ Pi 255-257 3984 Turrena, España <br />
Tel. 87654321
</address>
</div>
</li>
</ul>
Que se mostraría así por pantalla:
Empresa especializada en la elaboración de leporcias a la carta desde hace 6 años
Dirección:Desde 1996 lenteja florindes por absoluta franquicia.
Dirección:La idea es que al hacer click sobre el nombre de la empresa que queramos la información asociada se muestre o se oculte. Para ello crearemos una función Javascript que se encargue de realizar una u otra acción dependiendo del estado del contenedor que tiene la información.
Creamos la función items() con un argumento id
a través del cual le pasaremos como parámetro el número
de identificador del contenedor con el cual queramos actuar. Los contenedores
con la información llevan todos identificadores tipo item_1,
item_2, item_3, etc. Bastará con que pasemos
como argumento el número que diferencia a cada uno.
function ítems(id){}
Una vez dentro de la función vamos a guardar dentro de una variable
local (obj) el elemento HTML exacto con el que interactuar.
Para ello le haremos referencia usando el método del DOM
getElementById() y le pasaremos como argumento la parte común
de los identificadores item_ y le concatenaremos el número
que pasemos como argumento 'item_' + n
function items(id){
var obj = document.getElementById('item_'
+ id)
}
Usaremos la propiedad CSS
display y sus valores block o none para mostrar
u ocultar el contenedor con la información respectivamente.
A continuación comprobamos cuál es el estado del elemento,
si está visible (display = 'block') o si está
oculto (display='none')
if(obj.style.display == 'block')
Si devuelve true (verdadero) le asignamos el valor none
a la propiedad display del elemento
obj.style.display = 'none'
Si no devuelve true le asignamos el mismo valor por el que le estamos preguntando
else obj.style.display = 'block'
De esta forma siempre cambiará el valor al que no tenga asignado.
Si está en block cambiará a none
y viceversa en cada ocasión que pasemos al elemento por la función.
Así la función nos queda de esta forma
<script type="text/javascript">
<!--
function items(id){
var obj = document.getElementById('item_' + id)
if(obj.style.display == 'block') obj.style.display = 'none'
else obj.style.display = 'block'
}
//-->
</script>
¿Qué nos queda ahora por hacer? Indicarle a cada elemento que contiene el nombre de la empresa que al hacer click en él se muestre u oculte la información asociada a ésta.
onclick="items(n)"
…donde n será el número asociado al identificador
del contenedor de la información. items(1) manejará
el contenedor con id items_1, items(2)
el que tiene por id items_2, etc.
<ul id="listaEmpresas">
<li class="tituloItem" onclick="items(1)">Empresa 1
<div id="item_1" class="contenidoItem">
<p>Empresa especializada en la elaboración de leporcias a la carta desde hace 6 años </p>
<address>
Dirección:<br />
C/ Salmurriana 12 20345 Bastión, España <br />
Tel. 123455678
</address>
</div>
</li>
</ul>
Aplicamos algo de formato a nuestra lista de empresas. Un ejemplo sencillo podría ser algo así
<style type="text/css">
.tituloItem{
cursor: pointer;
font-weight: bold;
}
.contenidoItem{
border-left: 1px dotted #aaaaaa;
border-bottom: 1px solid #aaaaaa;
padding-left: 10px;
padding-bottom: 3px;
font-weight: normal;
margin-bottom: 10px;
margin-top: 0;
}
.contenidoItem p{
margin: 3px;
}
</style>
Y ahora alguien dirá que falta agregar el display con
un valor de none para la clase contenidoItem para
que la información asociada a cada empresa se encuentre inicialmente
oculta ¿no? Pues no. Las páginas web pueden ser más
o menos vistosas y pueden tener más o menos 'cosas chulas'
pero la misión principal de una página web es portar
información y que esa información pueda ser siempre
accesible por cualquier persona que acceda a nuestra página desde
cualquier dispositivo . Desde luego que lo último que nos interesa
es que aquellos visitantes que naveguen nuestro sitio sin Javascript se
queden sin poder acceder a la información. De nada nos sirve darnos
el trabajo de ponerla si luego no se llega a mostrar. De forma que de entrada
la información estará toda visible y, en caso de que el agente
de usuario (el programa que usa el dispositivo para navegar) que cargue
la página disponga de soporte para Javascript y además se
encuentre activado será entonces cuando el propio Javascript se encargue
de poner la propiedad CSS display de los contenedores de información
a un valor de none.
Para ello agregaremos una función que se encargue de hacerlo tras cargarse el listado de empresas en el navegador.
Lo primero que haremos será guardar el elemento que contiene el
listado dentro de una variable de nombre listado.
listado = document.getElementById('listaEmpresas')
Una vez localizado el objeto buscamos dentro de él los elementos
que querremos ocultar cambiando su propiedad display a none.
En el ejemplo hemos guardado la información dentro de elementos div
así que serán esos elementos los que seleccionemos y se guardarán
en la variable contenedores que será una variable de
tipo array (listado de elementos)
contenedores = listado.getElementsByTagName('div')
Ahora vemos cuántos de estos contenedores existen dentro de nuestro
listado. Para ello le pedimos su propiedad length (longitud)
y la guardamos en una variable de nombre numContenedores
numContenedores = contenedores.length
ok, ahora nos vamos a pasear por cada uno de ellos para colocarles su propiedad
display con un valor none pero antes nos hemos
de asegurar de que se lo aplicamos sólo a los contenedores div
que nos interesa. En el ejemplo usamos un solo div por empresa
pero tal vez estos div podrían contener a su vez a otros
div dependiendo de la cantidad de información que queramos
meter y de cómo queramos distribuirla. Así que nos fijaremos
nada más en los contenedores div cuyo id
sea item_n. Para ellos usamos la sentencia condicional if
para ver si es uno de los div que buscamos y nos fijamos si
su id contiene la cadena 'item_' usando el método
indexOf()
if(contenedores[m].id.indexOf('item_') == 0)
en caso de cumplirse la condición le ponemos al elemento la propiedad
display con su valor a none
contenedores[m].style.display = 'none'
La función completa nos quedaría algo así
function ocultaItems(){
listado = document.getElementById('listaEmpresas')
contenedores = listado.getElementsByTagName('div')
numContenedores = contenedores.length
for(m=0; m < numContenedores; m++){
if(contenedores[m].id.indexOf('item_') == 0)
contenedores[m].style.display = 'none'
}
}
Sólo nos queda realizar la llamada a la función detrás del listado de empresas.
<script type="text/javascript">
<!--
ocultaItems()
//-->
</script>
La parte de Javascript quedará de la siguiente forma
<script type="text/javascript">
<!--
function items(id){
var obj = document.getElementById('item_' + id)
if(obj.style.display == 'block') obj.style.display = 'none'
else obj.style.display = 'block'
}
function ocultaItems(){
listado = document.getElementById('listaEmpresas')
contenedores = listado.getElementsByTagName('div')
numContenedores = contenedores.length
for(m=0; m < numContenedores; m++){
if(contenedores[m].id.indexOf('item_') == 0)
contenedores[m].style.display = 'none'
}
}
//-->
</script>