Una de las cosas que m\u00e1s nos interesan a los webmasters es realizar un sitio con contenido dinamico y que por sobre todo sea completamente atractivo para el usuario. En muchos casos hay informaci\u00f3n que no deseamos mostrar salvo que el usuario quiera verla (como comentarios), y debemos ocultar dicho div, y tan solo mostrarlo cuando \u00e9l usuario desea.<\/p>\n
En este art\u00edculo vamos utilizar Javascript y CSS para lograr este proposito.<\/p>\n
Para mostrar y ocultar un div debemos instanciar un div con un ID \u00fanico y en el estilo incluir style=\u00bbdisplay:none;\u00bb por ejemplo:<\/p>\n
<div id=\"flotante\" style=\"display:none;\">CONTENIDO A OCULTAR\/MOSTRAR<\/div><\/pre>\nEn nuestro <head> debemos a\u00f1adir dos funciones en javascript para mostrar y ocultar dicho div respectivamente.<\/p>\n
<script languague=\"javascript\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 function mostrar() {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 div = document.getElementById('flotante');\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 div.style.display = '';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 function cerrar() {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 div = document.getElementById('flotante');\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 div.style.display = 'none';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n<\/script><\/pre>\nUna vez hecho esto, tenemos las funciones en javascript que mostrar\u00e1n y ocultar\u00e1n el div cuando el usuario haga click en una imagen o un texto con el link a la funci\u00f3n, como en el siguiente ejemplo:<\/p>\n
<p><a href=\"javascript:mostrar();\">Mostrar<\/a><\/p>\r\n<div id=\"flotante\" style=\"display:none;\">\r\n\u00a0\u00a0\u00a0\u00a0 <div id=\"close\"><a href=\"javascript:cerrar();\">cerrar<\/a><\/div>\r\n\u00a0\u00a0\u00a0\u00a0 Este es un div ocultar\r\n<\/div><\/pre>\n