Advanced Search

Return to Snippet

Revision: 26148
at April 19, 2010 06:53 by chiesalo
Initial Code 
<-- 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>--!>
Initial URL 
http://api.jquery.com/slideDown/
Initial Description 
Para hacer un solo desplegable, dejar solo una línea de <div></div>
Initial Title 
Desplegable en acordeón para varios textos en línea
Initial Tags 
javascript, html
Initial Language 
HTML