Expanding or Shrinking an area in website like Youtube

As an user Youtube is a great video sharing service .As a web developer ,Youtube like any web 2.0 service ,comes with many effects . One of them is changing the size of video are ,expanding or shrinking with a click .

when you click on "wide" button ,video area expand to a larger size ,sidebar goes down and content in video area stretch fully . When you click on 'normal' ,video area shrink to normal size and sidebar goes up .

Live Demo

In this post ,I want to introduce to you how we can make this trick . It's easy to do and won't take you a lot of time and effort .
This trick is related to a Jquery's API name ToggleClass ,which is a part of Jquery framework .ToggleClass can add or remove one or more classes from each element in the set of matched elements ,for example ,we get an element like this

<div class="tumble">Some text.</div>

if we apply this statement $('div.tumble').toggleClass('bounce') ,it mean : find all div elements which has class "tumble" and add one more class"bounce" to these div elements . And the result we get here

<div class="tumble bounce">Some text.</div>

But if we apply $('div.tumble').toggleClass('bounce') again ,the div element above return to "tumble" class only ,"bounce" is removed . So the result after second time is <div class="tumble">Some text.</div>
Base on what ToggleClass can do ,to expand or shrink an element , we can make an element with initial size for example 600px width .When user click on wide button ,we use ToggleClass to add a class "wide" to this element . The "wide" class will re-define width to 900px . And when user click on Normal button , we will apply ToggleClass again for removing "wide" class .The width of element back to 600px .

So ,we got the idea .Here is an example .
In this example ,we create a web page with five elements like this :
<div id="header"></div>
<div id="main">
    <div id="content"></div>
    <div id="sidebar"></div>
    <div id="comments"></div>
</div>
<div id="footer"></div>
Now ,the CSS

#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;}
float attribute of sidebar element must be right for it can goes up and down .If you set this attribute to left ,it may ruin your design .

In the website ,create a link for switch between expanding and collapsing mode . A link like this :
<a id="wideView" href="#">Change View</a>
Elements are ready ,to make it work ,we need to add a script :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#wideView").click(function() {
                $("#content").toggleClass("wide");
                $(this).toggleClass("wide");
            });
        });
    </script>
In the script above :
The first line : <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
for loading Jquery Framework so we can use jquery statements .
The following code :
$(document).ready(function() mean we only run this script when page are loaded fully .
$("#wideView").click(function() mean this function is only executed when user click on element which has id "wideView"
  $("#content").toggleClass("wide"); as I said on ToggleClass above ,this line will add a class 'wide' to element which has id="content" ,so re-define width of content from 540px to 900px
  $("#content").toggleClass("wide"); execute this line when user click element "wideView" again .This statement will remove the class 'wide' from element which id="content" ,so size of content element back to 540px;

Ok ,you are done .
Save webpage and see the result .
This trick can apply in websites and of course ,it work with Blogger . In this post ,I want to explain how it work to you and I hope you can apply it creatively ,unlike other posts, just show you a code and copy paste instruction .This can be used in video website like what youtube did ,or further ,changing web layout ...