PART-2 : Collapsible Multi-Tabbed Widget

Yesterday I published an article on Collapsible Multi-Tabbed Widget and this post is the second part of that tutorial. You just have to copy a single line from this post to completely change the UI of that widget.

Previous Widget used to look like this:



Once you follow the simple steps of this tutorial, you can give a complete new look to that widget by selecting the perfect widget-theme out of 24 available skins. Three of the 24 new skins are displayed below [Live DEMO]:

Now to give a new look to that widget, all you have to do is, add a single code-line in the STEP #1 of the previous tutorial. After modification the EXACT code you should use looks like this:

<!--COLLAPSIBLE-MULTI-TABBED-WIDGET-STARTS-->

PASTE NEW CODE-LINE HERE

<script type="text/javascript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/ui.core.js"></script>
<script type="text/javascript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/ui.tabs.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tabs").tabs();
});
//getter
var ajaxOptions = $('.selector').tabs('option', 'ajaxOptions');
//setter
$('.selector').tabs('option', 'ajaxOptions', { async: false });
</script>

//IMPORTANT: SOME UNECESSARY CODE FROM THIS PART IN THE PREVIOUS TUTORIAL HAS BEEN DELETED NOW
<!--COLLAPSIBLE-MULTI-TABBED-WIDGET-STOPS-HELP-@-http://bloggerstop.net-->

The line in BLUE is where you have to paste the new code, which is unique for every widget skin. Instead of that blue line, copy and paste the code of your interest from below.

Now go to this page: JQUERYUI - Tabs Demo
and from the drop-down menu (see the top-right region of the page), check out all the 24 available widget skins:

Then remember the name of the skin/theme of your choice and return back to this page. And now copy the appropriate code:

Theme #01: UI Lightness
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />

Theme #02: UI Darkness
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css" rel="stylesheet" />

Theme #03: Smoothness
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />

Theme #04: Start
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui.css" rel="stylesheet" />

Theme #05: Redmond
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" rel="stylesheet" />

Theme #06: Sunny
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/sunny/jquery-ui.css" rel="stylesheet" />

Theme #07: Overcast
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/overcast/jquery-ui.css" rel="stylesheet" />

Theme #08: Le Frog
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/le-frog/jquery-ui.css" rel="stylesheet" />

Theme #09: Flick (or Flicker type)
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/flick/jquery-ui.css" rel="stylesheet" />

Theme #10: Pepper Grinder
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/pepper-grinder/jquery-ui.css" rel="stylesheet" />

Theme #11: EggPlant
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/eggplant/jquery-ui.css" rel="stylesheet" />

Theme #12: Dark Hive
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/dark-hive/jquery-ui.css" rel="stylesheet" />

Theme #13: Cupertino
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/cupertino/jquery-ui.css" rel="stylesheet" />

Theme #14: South Street
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/south-street/jquery-ui.css" rel="stylesheet" />

Theme #15: Blitzer
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/blitzer/jquery-ui.css" rel="stylesheet" />

Theme #16: Humanity
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/humanity/jquery-ui.css" rel="stylesheet" />

Theme #17: Hot Sneaks
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/hot-sneaks/jquery-ui.css" rel="stylesheet" />

Theme #18: Excite Bike
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/excite-bike/jquery-ui.css" rel="stylesheet" />

Theme #19: Vader
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/vader/jquery-ui.css" rel="stylesheet" />

Theme #20: Dot Luv
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/dot-luv/jquery-ui.css" rel="stylesheet" />

Theme #21: Mint Choc
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/mint-choc/jquery-ui.css" rel="stylesheet" />

Theme #22: Black Tie
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/black-tie/jquery-ui.css" rel="stylesheet" />

Theme #23: Trontastic
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/trontastic/jquery-ui.css" rel="stylesheet" />

Theme #24: Swanky Purse
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/swanky-purse/jquery-ui.css" rel="stylesheet" />

Once you have copied the code, replace the blue line in the above code with this new code and save your template.
From the previous post, leave the code in STEP #2 as it is.
Your widget is now ready in an entirely new look...