Buenas a todos, en este ejemplo vamos a ver como ocultar y mostrar un panel con javascript.
Para ello creamos un proyecto asp.net vacío, y agregamos un webform.
vamos a poner en el webform un checkbox que se encargara de mostrar o ocultar el panel <div> o <asppanel> , un panel y dentro del panel un asptextbox de tal manera que el html nos quede algo así:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body> <form id="form1" runat="server"> <div> <asp:CheckBox ID="CheckBox1" runat="server" Text="Ocultar/Mostrar" /> <asp:Panel ID="Panel1" runat="server" > <asp:TextBox ID="TextBox1" runat="server" Text="Soy un textbox"></asp:TextBox> </asp:Panel> </div> </form> </body> </html> |
A continuación en el evento OnClick llamaremos a la función de javascript que mostrara o ocultara el panel
de tal manera que el checkbox nos queda de esta manera.
|
1 |
<asp:CheckBox ID="CheckBox1" runat="server" Text="Ocultar/Mostrar" OnClick="OcultarMostrar();"/> |
Ahora nos falta la función de Javascript justo debajo de la sección de form1 que se encargara de realizar esta acción.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script type="text/javascript"> function OcultarMostrar() { //Preguntamos por el id y su estado si es false if (document.getElementById('Panel1').hidden == false) { //lo ocultamos document.getElementById('Panel1').hidden = true; } else { //si no lo mostramos document.getElementById('Panel1').hidden = false; } }; </script> |
Ahora nos queda probarlo.
sin marcar el check
Marcando el check:
Aquí os dejo todo el código seguido del webform:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body> <form id="form1" runat="server"> <script type="text/javascript"> function OcultarMostrar() { //Preguntamos por el id y su estado si es false if (document.getElementById('Panel1').hidden == false) { //lo ocultamos document.getElementById('Panel1').hidden = true; } else { //si no lo mostramos document.getElementById('Panel1').hidden = false; } }; </script> <div> <asp:CheckBox ID="CheckBox1" runat="server" Text="Ocultar/Mostrar" OnClick="OcultarMostrar();"/> <asp:Panel ID="Panel1" runat="server" > <asp:TextBox ID="TextBox1" runat="server" Text="Soy un textbox"></asp:TextBox> </asp:Panel> </div> </form> </body> </html> |
Espero que os sirva….. y quizas te interese también cookies y tiempo de expiración aquí.
Puedes visitar mi canal de youtube aqui
Un saludo a todos ,