Ejemplo Mostrando y ocultando div con JQuery
En este ejemplo utilizaremos jQuery para poder darle efecto a un elemento como ser el ocultar y mostrar contenido que forme parte de un div.
Aqui el código:
El codigo anterior solo representa el texto del cuerpo que llevaria la pagina
Utilizando las funciones de jquery le añadiriamos las acciones nesesarias para que el div se muestre y oculte
Aqui el código:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>jQuery appletenhtml</title>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body>
<div class="container-fluid-">
<div class="row">
<div class="col-md-4 caja col-centrar">
<h3>appletenhtml</h3>
<br>
<div id="base" class="mice" title="Titulo del contenedor">click para mostrar contenido</div>
<div id="panel">
HD el dia que mires esto quiero que sepas que te recuerdo... Alola!
</div>
</div>
</div>
</div>
<script src="js/jquery-3.2.0.min.js"></script>
<script src="js/codigo.js"></script>
</body>
</html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>jQuery appletenhtml</title>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body>
<div class="container-fluid-">
<div class="row">
<div class="col-md-4 caja col-centrar">
<h3>appletenhtml</h3>
<br>
<div id="base" class="mice" title="Titulo del contenedor">click para mostrar contenido</div>
<div id="panel">
HD el dia que mires esto quiero que sepas que te recuerdo... Alola!
</div>
</div>
</div>
</div>
<script src="js/jquery-3.2.0.min.js"></script>
<script src="js/codigo.js"></script>
</body>
</html>
El codigo anterior solo representa el texto del cuerpo que llevaria la pagina
Utilizando las funciones de jquery le añadiriamos las acciones nesesarias para que el div se muestre y oculte
$(document).ready(function(){
//efectuando accion dando click a base
$('#base').click(function(){
//mostrando el div#panel oculto si le damos click a base
$('#panel').slideDown();
$(this).height('50px');
});
//efectuando accion dando click a base
$('#panel').click(function(){
//ocultando el div#panel si le damos click a base tardandose 4 segundos
$(this).slideUp(4000);
});
//mostrando el titulo del dicv
$('#base').click(function(){
var t =$(this).attr('title');
$('#panel').html(t);
});
});
//efectuando accion dando click a base
$('#base').click(function(){
//mostrando el div#panel oculto si le damos click a base
$('#panel').slideDown();
$(this).height('50px');
});
//efectuando accion dando click a base
$('#panel').click(function(){
//ocultando el div#panel si le damos click a base tardandose 4 segundos
$(this).slideUp(4000);
});
//mostrando el titulo del dicv
$('#base').click(function(){
var t =$(this).attr('title');
$('#panel').html(t);
});
});
Comentarios
Publicar un comentario