Tecnología

Inicio

Cómo hacer que las secciones expandibles con HTML

A pesar de aumentar los tamaños de pantalla, "explorador de bienes raíces" - el espacio disponible para el contenido de la página Web dentro de una ventana del navegador - sigue siendo un bien escaso. Cuando usted necesita para empacar una sola página web lleno de contenido, colocándola más abajo en la página no es siempre una respuesta aceptable, especialmente cuando esos contenidos son información importante. Una solución es la creación de secciones expandibles. Esta técnica presenta a los usuarios un conjunto de cabeceras, cada expandible con un clic. Los usuarios obtienen para leer el contenido que desean sin tener que desplazarse hacia abajo para encontrarlo, por lo que no van a perder lectores o clientes desde su sitio web.

Instrucciones

1 Añadir el contenido de cada sección a su página Web, envolviendo cada uno en un par de "<div>" etiquetas. Estos divs no necesitan de identificación o de clase nombres, pero cada uno lo hace necesitan su propio encabezado. Coloque el encabezado de cada sección por encima de sus "<div>" etiquetas y hacer que cada uno puede hacer clic en la partida mediante la colocación de su texto dentro de las etiquetas de anclaje:

<H3> <a href="#"> Sobre Nosotros </a> </ h3>
<Div>
El contenido va aquí ...
</ Div>

2 Envuelva todas las secciones dentro de un par de "<div>" etiquetas y darles un nombre de ID:

<Div id = "expandible">
<H3> <a href="#"> Sobre Nosotros </a> </ h3>
<Div>

Content goes here...

</ Div>
<H3> <a href="#"> Nuestros Servicios </a> </ h3>
<Div>

Content goes here...

</ Div>
</ Div>

3 Agregue el siguiente código encima del cierre "</ body>" tag:

<Script src = "& lt; / script" rel = "nofollow" target = "_blank"> https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js&quot;> & lt; / script>
<Script src = "& lt; / script" rel = "nofollow" target="_blank">https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js&quot;>&lt;/script>

El primer conjunto de "<script>" etiquetas añade la biblioteca jQuery para su página Web, la cual es necesaria para ejecutar la interfaz de usuario jQuery. El segundo conjunto de "<script>" etiquetas añade la biblioteca jQuery UI. Estos dos librarires que sea fácil de escribir una secuencia de comandos que se expande y contrae las secciones que ha creado.

4 Añadir un nuevo par de "<script>" etiquetas por debajo de los dos que ha pegado en. Entre las etiquetas, escribir un selector de jQuery que se dirige el nombre de identificación de la div principal que contiene todas sus secciones expandibles. Anexar a este selector del "acordeón ()" función:

<Script>
$ ( "# Colapso") acordeón (.);
</ Script>

5 Crear una nueva línea dentro de los paréntesis después de "acordeón". Coloque una llave de apertura después del paréntesis de apertura y una llave de cierre antes del paréntesis de cierre. En la nueva línea, añadir "colapsable: true" por lo que el usuario puede colapsar todas las secciones.

<Script>
$ ( "# Colapso"). Acordeón ({
colapsable: true
});
</ Script>

Consejos y advertencias

  • Descargar la librería jQuery UI, junto con sus hojas de estilo envasados, desde la página oficial. Sube todos los archivos a un servidor y un enlace a una de sus hojas de estilo en su página web para aprovechar los estilos pre-construidos.