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
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
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 ...