Utilizamos cookies propias y de terceros para mejorar nuestros servicios y mostrarle publicidad relacionada con sus preferencias mediante el análisis de sus hábitos de navegación. Si continúa navegando, consideramos que acepta su uso.
Las cookies de este sitio web se usan para personalizar el contenido y los anuncios, ofrecer funciones de redes sociales y analizar el tráfico. Además, compartimos información sobre el uso que haga del sitio web con nuestros partners de redes sociales, publicidad y análisis web, quienes pueden combinarla con otra información que les haya proporcionado o que hayan recopilado a partir del uso que haya hecho de sus servicios. Puede cambiar la configuración u obtener más información aquí

Aceptar

Google

tunait.com » Tutorial » Mostrar/ocultar información


Mostrar y ocultar información

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&oacute;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&oacute;n:<br />
         C/ Pi 255-257 3984 Turrena, España <br />
         Tel. 87654321 
         </address> 
      </div>
   </li>
</ul>
     

Que se mostraría así por pantalla:

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&oacute;n:<br />
         C/ Salmurriana 12 20345 Bastión, España <br />
         Tel. 123455678 
         </address> 
      </div>
   </li>
</ul>
     

Aplicando los estilos CSS

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>
     

Mostrar y ocultar información (II)


Copyright © 2006 www.tunait.com todos los derechos reservados