-
Cómo expandir una sección en JavaScript
-
etiquetas de anclaje, JavaScript y CSS pueden ayudarle a añadir un aspecto profesional expansión de las secciones a las páginas Web. Es posible que haya visto este efecto mientras hace clic en un botón o enlace en una página web. Al hacer clic en una sección expandible hace que muestre el contenido adicional. Aprender a crear este efecto le da la capacidad de colocar grandes cantidades de contenido en una pequeña cantidad de espacio web.
Instrucciones
1 Crear un nuevo documento HTML usando el Bloc de notas o su editor HTML.
2 Pegue el siguiente código en la sección del documento "<body>":
<Div>
<a href="#" onclick="return manageSection('section1')"> Sección Título 1 </a>
<Div id = clase "section1" = "se derrumbó">
contenidos ampliados de la sección 1
</ Div>
</ Div>
Este código HTML crea una línea de texto de enlace que dice: "Sección 1. La partida" Tiene un evento onclick que llama a una función JavaScript denominada "manageSection" cuando se hace clic. Tenga en cuenta la etiqueta "div" por debajo de la sección de cabecera. Se hace referencia a una clase CSS llamada "colapsado". Esa clase mantiene el div y su contenido podrá ver hasta JavaScript hace que los contenidos visibles. Tenga en cuenta que la llamada a la "manageSection" JavaScript función pasa el id de la div colapsado. Esa identificación es "section1." La función de las necesidades de ese valor para determinar qué div se expanda.
3 Pegue el código siguiente después del código se describe en el paso anterior:
<Div>
<a href="#" onclick="return manageSection('section2')"> Sección Título 2 </a>
<Div id = clase "section2" = "se derrumbó">
contenidos ampliados de la sección 2
</ Div>
</ Div>
Esto crea otra línea de texto de enlace que dice: "Sección 2. La partida" El evento onclick llama a la misma función de JavaScript y pasa a la sección de "2" para la función.
4 Localice la sección <head> del documento, y añada el siguiente código CSS a esa sección:
<Style type = "text / css">
.expanded {display: block;}
.collapsed {display: none;}
</ Style>
Esto crea la clase "expandida" que hace un elemento visible y la clase "colapsado" que lo oculta.
5 Pegue el siguiente código JavaScript después de que el código CSS se muestra en el paso anterior:
función manageSection (sectionid) {
sección var = document.getElementById (sectionid);
si (== section.className "colapsado")
section.className = "expanded";más
section.className = "colapsó";
return true;
}
Este código se ejecuta cuando el usuario haga clic en uno de los títulos de las secciones de la página Web. Cada vez que un usuario hace clic en un encabezado, cambia el código de clase CSS del div oculto entre "ampliado" y "colapsado". Esto da la ilusión de que las secciones están abriendo y cerrando.
6 Guardar este documento y abrirlo en un navegador. El navegador muestra los dos títulos de las secciones visibles llamada "Sección de Título 1" y "Sección 2. La partida"
7 Haga clic en estas partidas. El navegador que se expande para mostrar el contenido adicional dentro de las secciones. Haga clic en las secciones de nuevo para contraerlas.
Consejos y advertencias
- Los dos divs ocultos en este ejemplo contienen los "contenidos ampliados de la sección 1" texto "y expandida de contenidos de la sección 2." Puede reemplazar el texto con cualquier elemento de HTML que desee. Por ejemplo, si desea expandir y contraer una galería de imágenes, tablas o incluso un vídeo, colocarlos en las secciones div ocultos. Navegadores muestran lo que pone en esas secciones cuando los usuarios a ampliar.
