ubiquitour.com

Cómo ocultar y mostrar un Div con JavaScript

Cómo ocultar y mostrar un Div con JavaScript

Páginas web interactivas, o páginas que usan elementos que los espectadores pueden cambiar, pueden beneficiarse de la capacidad de mostrar u ocultar elementos de página. Por ejemplo, si está diseñando una tienda, puede dar a los visitantes la posibilidad de pulsar un botón "más información" para obtener más información sobre una potencial compra. Haciendo uso de esta habilidad se basa en JavaScript y el atributo CSS "display", que puede ser modificado dinámicamente.

Instrucciones

1 Abra el archivo .html o .php que contiene el div cuya visibilidad para cambiar con un simple editor de texto. Desplácese hacia abajo hasta el div---la línea de código que comienza con "< div >" y final, después de que el contenido es proporcionado, con "< / div >".

2 Agregue la línea "id = 'hidetoggle' «entre el tres letras"div"y el cierre" > "de la div. Si hay no otro estilo o posicionamiento de elementos utilizados, el div tendrá ahora el siguiente aspecto: "< div id = 'hidetoggle' >"; Si hay otros atributos en el div, agregar el elemento de id primero a modo de referencia.

3 Desplácese hasta el final de la div y golpear "entrar" para comenzar una nueva línea. En él, escriba el siguiente código, o cortar y pegar en el documento:

< span estilo = "frontera: 1px solid black" onclick="document.getElementById('hidetoggle').style.display = 'block'" > Mostrar < /span >

4 Golpe "enter" nuevamente para agregar una segunda línea de código inmediatamente después de la primera. Para esta línea, el código debería parecerse al siguiente:

< span estilo = "border: 1px solid black" onclick="document.getElementById('hidetoggle').style.display = 'none'" > Ocultar < /span >

5 Guarde el archivo HTML y abrirlo en su navegador. Ahora verás dos botones etiquetados "show" y "ocultar", que puede hacer clic para cambiar la visibilidad de su div.

Consejos y advertencias

  • Puede cambiar el id del div; cada div que desea mostrar u ocultar necesitará una identificación independiente. Si cambia el valor, sin embargo, asegúrese de cambiar tanto de los botones editando el valor contenido entre los paréntesis en la parte de "getElementById()" del código.