Solucio show hide
De wikiserver
La revisió el 20:50, 12 feb 2015 per Jnoguera (Discussió | contribucions) (Es crea la pàgina amb «<source lang="java"> <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/estilos4.css"/> <script src="js/jquery-1.5.1.min…».)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/estilos4.css"/>
<script src="js/jquery-1.5.1.min.js" ></script>
<script src="js/fichero4_show_hide.js" ></script>
<title>Mostar/Ocultar rápidamente/suavemente</title>
</head>
<body>
<input type="button" id="boton1" value="Ocultar recuadro">
<input type="button" id="boton2" value="Mostrar recuadro">
<div id="descripcion" class="recuadro">
<p>HTML5 es una nueva e innovadora técnología para la craeción
de páginas Web
</p>
</div>
</body>
</html>
//Fichero JavaScript
$(document).ready(inicializarEventos);
function inicializarEventos(){
$("#boton1").click(ocultarRecuadro);
$("#boton2").click(mostrarRecuadro);}
function ocultarRecuadro(){
$("#descripcion").hide("slow");}
function mostrarRecuadro(){
$("#descripcion").show("fast");}
//Fichero CSS
.recuadro {
background-color:#ffffcc;
font-family:verdana;
font-size:14px;
border-top-width:1px;
border-right-width:3px;
border-bottom-width:3px;
border-left-width:1px;
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:dotted;
border-top-color:#ffaa00;
border-right-color:#ff0000;
border-bottom-color:#ff0000;
border-left-color:#ffaa00;
}
