• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
WittySparks Logo White

WittySparks

Ignite Your Thoughts

  • Topics
  • Reviews
  • Newsletter
WittySparks / Technology / Programming / Stylish collapsible Fieldset by using CSS3 & jQuery

Stylish collapsible Fieldset by using CSS3 & jQuery

Programming May 26, 2010 by Sravan K

There are many examples out there to build the collapsible Fieldset either by using simple JavaScript or by using the jQuery framework. But what if a 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.

Stylish collapsible fieldset by using CSS3 & jQuery
Stylish collapsible fieldset by using CSS3 & jQuery

So just started my journey into the latest web trends (web 2.0) with a simple HTML fieldset and making it look better first by giving some glossy look to it by using CSS3 and Google Font API and adding 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 toggle 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. Of course, I can use the 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 the font rendering you see in the example is by using Google Font API.

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

This example works well in all the latest browsers and is 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.

Related Topics

  • PHP: Is it the best Programming Language ever?
  • How To Build A Great Search Box On Your Website
  • How to make Python3 version default in Windows OS?
Previous Post: « Google introduces Google Font Directory and its API
Next Post: Art and Creativity through some amazing 3D murals »
Profile picture for Sravan K

About Sravan K

Contributor at WittySparks
WittySparks Staff

Sravan is a highly experienced web designer, user experience designer and developer. You can connect with him on Twitter or LinkedIn and initiate a chat.

View all posts by Sravan K

Primary Sidebar

Search

Exclusive Coupons

  • Moqups coupon code: WITTYSPARKS for 20% or PARTNERS50 for 50% discount.
  • WPForms coupon code: WITTYSPARKS for 50% off.
  • Serpstat coupon code: wittysparks_discount for 30% off.
  • SEO Buddy coupon code: WITTYSPARKS for 25% off.
  • Morningscore coupon code: wittysparks for 30% off for 3 months.
  • FlexClip coupon code: WITTYSPARKS for 30% off.
  • Uplead coupon code: “witty” for 30-day free trial.
  • FastestVPN coupon codes: WITTYSPARKS15 or WITTYSPARKS10 or Get up to 93% OFF.
  • Outranking.io coupon code: WITTYSPARKS50 for 50% off.

For more such offers visit our exclusive offers for SEO, Bloggers, Marketers and for Business owners.

Featured Productivity Software

Notion logo
Notion

Whether you’re a solo entrepreneur or a large team, Notion Workspace can help you stay organized and get more done. Get started today and take your productivity to the next level.

Try Notion for FREE

Footer

Affiliate Disclosure

If you make a purchase from WittySparks links, we will receive a small commission. See our Affiliate Disclosure.

Sponsors

Partnered with FreePik to use the licensed images.

turn to dhgate for smartphone

Follow Us

  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn
  • Instagram
  • YouTube
  • RSS

Copyright © 2023 · Hosting sponsored by Rocket.net (Affiliate link)

  • About Us
  • Contact Us
  • Privacy Policy
  • LinkedIn
  • Twitter
  • Like
  • Pinterest