Solucio show hide

De wikiserver
Dreceres ràpides: navegació, cerca
<!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; 
}