Stylish collapsible Fieldset by using CSS3 & jQuery

There are many examples out there to build the collapsible Fieldset either by using simple JavaScript or by using jQuery framework. But what if collapsible fieldset gets the stylish look with CSS3, Google Font Directory and jQuery framework?

Actually, I am trying to take the basic elements or tags available in HTML and wanted them to meet the latest web trend in design or presentation or look n feel or performance or appearance or whatever you call it as.

So just started my journey into the latest web trends (web 2.0) with simple HTML fieldset and making it look better first by giving some glossy look to it by using CSS3 and Google Font API and added a collapsible or toggle fieldset functionality to it with few lines of code of jQuery.

Here is the jQuery code used to build this collapse/expand or toogle fieldset functionality.

$("legend").click(function(){
		$(this).children("b").toggleClass("collapsed");
		$(this).nextAll("div.content").slideToggle(500);
});
$("fieldset.topleft1 legend").children("b").addClass("collapsed");
$("fieldset.topleft1 legend").nextAll("div.content").hide();
$("fieldset.topleft2 legend").children("b").addClass("collapsed");
$("fieldset.topleft2 legend").nextAll("div.content").hide();

I am sure there might be some shorter method to achieve this functionality, if so? would appreciate if you can share the code and let me also learn some shorter way to achieve this.

and here is the CSS used for this:

body{
	background-color:#b63144;
	font-family:'Droid Serif', arial, serif;
}
fieldset{
	width:600px;
	margin:25px auto;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;	
	-khtml-border-bottom-left-radius:10px;
	-khtml-border-bottom-right-radius:10px;	
	-moz-border-radius-bottomleft:10px;
	-moz-border-radius-bottomright:10px;
	-webkit-border-bottom-left-radius:10px;
	-webkit-border-bottom-right-radius:10px;	
	color:#606060;
	border:solid 1px #b7b7b7;
	border-top:10px solid #ffdd55;
	background:#fff;
	background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
	background:-moz-linear-gradient(top,  #fff,  #ededed);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
	text-shadow:0 1px 1px rgba(255,255,255,1);	
	-webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
	-moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
	box-shadow:0 1px 2px rgba(0,0,0,.4);
}
fieldset legend{
	margin-left:-11px;
	float:left;
	font-size:30px;
	padding:10px 20px 10px 15px;
	cursor:pointer;
	color:#e8f0de;
	border:solid 1px #538312;
	background:#64991e;
	background:-webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
	background:-moz-linear-gradient(top,  #7db72f,  #4e7d0e);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
	text-shadow:0 1px 1px rgba(0,0,0,.3);
	border-top-right-radius:10px;
	border-bottom-right-radius:10px;	
	-khtml-border-top-right-radius:10px;
	-khtml-border-bottom-right-radius:10px;	
	-moz-border-radius-topright:10px;
	-moz-border-radius-bottomright:10px;
	-webkit-border-top-right-radius:10px;
	-webkit-border-bottom-right-radius:10px;	
	-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow:0 1px 2px rgba(0,0,0,.2);
	box-shadow:0 1px 2px rgba(0,0,0,.2);
}
fieldset legend:hover{
	background:#538018;
	background:-webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
	background:-moz-linear-gradient(top,  #6b9d28,  #436b0c);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}
fieldset legend b{
	display:inline-block;
	-o-transform:rotate(90deg);
	transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
fieldset div.content{
	display:block;
	margin:20px 25px 25px 30px;
	clear:both;
	float:left;
	width:545px;
}
.collapsed{
	display:inline-block;
	-o-transform:rotate(0deg);
	transform:rotate(0deg);
	-webkit-transform:rotate(0deg); 
	-moz-transform:rotate(0deg);
	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /*1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degress respectively.*/
}
fieldset.topleft1 legend{
	border-top-right-radius:0px;
	border-bottom-right-radius:10px;	
	-khtml-border-top-right-radius:0px;
	-khtml-border-bottom-right-radius:10px;	
	-moz-border-radius-topright:0px;
	-moz-border-radius-bottomright:10px;
	-webkit-border-top-right-radius:0px;
	-webkit-border-bottom-right-radius:10px;
	margin-top:-15px;
}
fieldset.topleft1 h1{
	margin-top:0px;
}
fieldset.topleft1 div.content, fieldset.topleft2 div.content{
	margin-left:50px;
	width:520px;
}
fieldset.topleft2 div.content{
	text-shadow:0 1px 1px rgba(120,20,35,1);
}

and the simple HTML:

<fieldset>
<legend> <b> »</b> Join Us </legend>
Place your content here.
</fieldset>

And used CSS3 mainly to give a good look to the fieldset by using gradients, drop-shadows, text-shadows, rounded corners and rotation of the arrows while expanding and collapsing. Ofcourse I can use image in place of the double arrows for fieldset legend but I wanted to achieve this look with zero images.

Since Google Font API is recently launched, I just wanted to give it a try – so that font rendering you see in the example is by using Google Font API.

How about the jQuery? yes it is used here for collapsing the fieldset.

This example works well in all the latest browsers and are tested in Opera 10.53, Safari 4.0.5, Firefox 3.6.4, Google Chrome 5.0.375.55 browsers.

And here is the link for

DEMO DOWNLOAD

I hope you all love this and spread it :) and would be very happy to hear your feedback.

Further Reading...

Slide out or Navigation Drawer jQuery Menus for your next web app!

iCheck a jQuery plugin for custom Checkbox and Radiobuttons

Pickadate.js – jQuery mobile friendly and lightweight date picker!