Posted By

chiesalo on 04/19/10

Tagged

Versions (?)

Last Edited at 04/19/10 06:53am

Statistics

Viewed 841 times

Favorited by 0 user(s)

Related snippets

Desplegable en acordeÃ³n para varios textos en lÃnea

/ Published in: HTML

Para hacer un solo desplegable, dejar solo una lÃnea de

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

<-- pÃ¡gina dÃ³nde se encontrÃ³: http://api.jquery.com/slideDown/ --!>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo de texto en acordeÃ³n</title>
  <style>
div { background:#de9a44; margin:3px; width:80px; 
height:40px; display:none; float:left; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
 
<body>
 
	Leer mÃ¡s
<div></div>
<div></div>
<div></div>
<script>
$(document.body).click(function () {
if ($("div:first").is(":hidden")) {
$("div").slideDown("slow");
} else {
$("div").hide();
}
});
 
</script>
 
 
</body>
</html>
 
 
 
<-- cambiar todos los div por nuestro propio div, al que vayamos a aplicar esta funciÃ³n: 
div#desplegable
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo de texto en acordeÃ³n</title>
<style>
div#desplegable { background:#de9a44; margin:3px; width:80px; 
height:40px; display:none; float:left; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
 
<body>
 
	Leer mÃ¡s
<div></div>
 
<script type="text/javascript">
$(document.body).click(function () {
if ($("div#desplegable:first").is(":hidden")) {
$("div#desplegable").slideDown("slow");
} else {
$("div#desplegable").hide();
}
});
 
</script>
 
 
</body>
</html>--!>