SummArg | Cursos y recursos para webmasters

27/06/2011

Expandir y contraer una sección del Layout como en YouTube

En jankoatwarpspeed publicaron un tutorial en el que nos muestran como lograr un efecto aplicado por sitios como YouTube, en donde una caja de texto puede expandirse o contraerse horizontalmente utilizando jQuery.

El código

Primero se arma una estructura simple, a la que se le pueden insertar algunos contenidos de prueba. Añadimos el botón para cambiar de modo de vista dentro del div #content, el cual habrá de expandirse-contraerse.
<div id="header"><h1>Header</h1></div>
<div id="main">
<div id="content">
<a id="wideView" href="#">CAMBIAR</a>
<h2>Un título de prueba</h2>
<p>Contenido de prueba...</p>
</div>
<div id="sidebar">
<h3>Titulo Sidebar<h3>
<p>Contenido prueba de la sidebar</p>
</div>
<div id="comments">
<p>Comentarios varios</p>
</div>
</div>
<div id="footer"><p>Contenido footer</p></div>

Luego en el CSS indicamos a la sidebar que se posicione con float a la derecha. Añadimos la clase .wide que será la que establezca el ancho máximo cuando #content cambie de su ancho por defecto a uno mayor.

#header, #content, #comments, #sidebar, #footer { margin:10px 0px; padding:30px;}
#header { width:900px; margin:0px auto;}
#main {width:960px; margin:0px auto; overflow:hidden;}
#content { width:540px; float:left;}
#comments { width:540px; float:left;}
#sidebar { width:280px; margin-left:20px; float:right;}
#footer { width:900px; margin:0px auto;}
#content.wide { width:900px;}

Finalmente incluimos jQuery e insertamos el código para que cuando sea clickeado el link con id #wideView, el div #content cambie su clase a .wide, pasando de ese modo a tener un ancho de 900px tal como indicamos en el CSS.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#wideView").click(function() { $("#content").toggleClass("wide"); $(this).toggleClass("wide"); }); }); </script>

Ver Tutorial | Ver Demo

Dejar un comentario