28/12/2014, 23:19
|
| | | Fecha de Ingreso: noviembre-2005
Mensajes: 889
Antigüedad: 19 años, 4 meses Puntos: 8 | |
| Respuesta: Desplegable de acordeón
Lo he puesto como sigue; pero parece no funcionar por alguna razón:
Código:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ejemplo</title>
<style type="text/css">
.toggle{list-style:none;margin:20px;padding:0;}
.toggle>li{margin:3px 0;border:1px #000 solid;}
.toggle>li>strong{display:block;font:13px/33px arial,verdana,tahoma;color:#fff;background:#222;padding:0 15px;cursor:pointer;}
.toggle>li>div{display:none;padding:15px;}
</style>
<script>
$('.toggle>li>.title').click(function(){
if($(this).parent().hasClass('active')){
$(this).next().slideUp('slow').parent().removeClass('active');
}else{ $('.toggle>li').removeClass('active').children('div').slideUp('slow');
$(this).next().slideDown('slow').parent().addClass('active');
}
});
</script>
</head>
<body>
<ul class="toggle">
<li><strong class="title">titulo</strong>
<div>Ajustando el background-size se puede hacer magia. Con esto ajustamos el tamaño de nuestro patrón, para así realizar un bonito efecto.Se puede realizar el mismo efecto con la propiedad repeating-linear-gradient, nos dará el mismo efecto anterior. Se están utilizando ahora, en lugar de porcentajes, medidas fijas. Con esto podremos personalizar aún más nuestro efecto a desear.</div>
</li>
<li><strong class="title">titulo</strong>
<div>Ajustando el background-size se puede hacer magia. Con esto ajustamos el tamaño de nuestro patrón, para así realizar un bonito efecto.Se puede realizar el mismo efecto con la propiedad repeating-linear-gradient, nos dará el mismo efecto anterior. Se están utilizando ahora, en lugar de porcentajes, medidas fijas. Con esto podremos personalizar aún más nuestro efecto a desear.</div>
</li>
<li><strong class="title">titulo</strong>
<div>Ajustando el background-size se puede hacer magia. Con esto ajustamos el tamaño de nuestro patrón, para así realizar un bonito efecto.Se puede realizar el mismo efecto con la propiedad repeating-linear-gradient, nos dará el mismo efecto anterior. Se están utilizando ahora, en lugar de porcentajes, medidas fijas. Con esto podremos personalizar aún más nuestro efecto a desear.</div>
</li>
</ul>
</body>
</html>
Última edición por JUMASOL; 28/12/2014 a las 23:35 |