UPDATE: This widget is no longer working. A new tutorial has been written on "How to Add Collapsible Multi-Tabbed Widget"

The widget looks like this:


But when you select tab 2 or tab 3, the height of the widget will adjust itself according to the content in tab 2 or tab 3.

To see this widget in action see this blog: Club-Vista Template
Or see it live here: Demo 2

Instructions to add this widget to your blog:

Step1:
Download these two files:
jquery-ui-personalized-1.5.2.packed.js
sprinkle.js

from NetTutsPlus | (Download the Source.zip file)

NOTE: Delete extra files (index.html, jquery-1.2.6.min.js, star.png, style.css) included in the downloaded zipped file.

Also download
new-tabber-Style.rar
from Here - Ziddu.com
Extract and save the file as new-tabber-Style.css

Step2:
Now go to MyDataNest.com and upload all those 3 files. And copy all the DIRECT LINKS to these files.
NOTE: In your MyDataNest account, edit and save the properties of the folder as "hidden" and NOT as "private" where you just uploaded the files.

Step3:
Log in to Blogger
Go to "Layout" -> Edit HTML
and find (CTRL+F) this in the template code :
</head>

And immediately BEFORE/ABOVE it, paste this code:
<!--MULTI-TABBED-WIDGET-STARTS-->
<link href='http://mydatanest.com...../new-tabber_style.css' rel='stylesheet' type='text/css'/>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script src='http://mydatanest.com...../new-tabber_jquery-ui-personalized-1.5.js' type='text/javascript'/>
<script src='http://mydatanest.com...../new-tabber_sprinkle.js' type='text/javascript'/>
<!--MULTI-TABBED-WIDGET-STOPS-->

Before pasting the code in to your template, replace the links in RED to the DIRECT LINKS of the files you got from step 2.

Step4:
Now save the template.

Step5:
Go to "Layout" -> Page Elements and Add a Gadget (HTML/JavaScript type)

Step6:
And finally copy and paste this code in to the new widget:
<div id="tabvanilla" class="widgettab">


<ul class="tabnav">
<li><a href="#popular">Popular</a></li>
<li><a href="#recent">Recent</a></li>
<li><a href="#featured">Featured</a></li>
</ul>


<div id="popular" class="tabdiv">
<ul>
<li><a href="#">Welsh Zombie Sheep Invasion</a></li>
<li><a href="#">Sheep Rising From The Dead</a></li>
<li><a href="#">Blogosphere Daily Released!</a></li>
<li><a href="#">Aliens Infiltrate Army Base In UK Town</a></li>
<li><a href="#">U2 Rocks New York's Central Park</a></li>
<li><a href="#">TA Soldiers Wear Uniforms To Work</a></li>
<li><a href="#">13 People Rescued From Flat Fire</a></li>
<li><a href="#">US Troops Abandon Afghan Outpost</a></li>
<li><a href="#">Are We Alone? A Look Into Space</a></li>
<li><a href="#">Apple iPhone 3G Released</a></li>
</ul>
</div><!--/popular-->


<div id="recent" class="tabdiv">
<p>Your recent posts widget here</p>
</div><!--/recent-->


<div id="featured" class="tabdiv">
<ul>
<li><a href="#">Aliens Infiltrate Army Base In UK Town</a></li>
<li><a href="#">Are We Alone? A Look Into Space</a></li>
<li><a href="#">U2 Rocks New York's Central Park</a></li>
<li><a href="#">TA Soldiers Wear Uniforms To Work</a></li>
<li><a href="#">13 People Rescued From Flat Fire</a></li>
<li><a href="#">US Troops Abandon Afghan Outpost</a></li>
<li><a href="#">Sheep Rising From The Dead</a></li>
<li><a href="#">Blogosphere Daily Released!</a></li>
<li><a href="#">Apple iPhone 3G Released</a></li>
<li><a href="#">Welsh Zombie Sheep Invasion</a></li>
</ul>
</div><!--featured-->


</div>

Of course change the colored code as per your requirement.

NOTE: To adjust the width of the widget or margin around the widget or to replace the silver star with any other image, you have to EDIT the .css file (new-tabber_style.css) before uploading it to HotLinkFiles.com

So add this professional widet to your blog ASAP !

Credits for the widget: Dan Harper and NetTuts+