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

WittySparks

Ignite Your Thoughts

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

Stylish collapsible Fieldset by using CSS3 & jQuery

Programming May 26, 2010 by Sravan Kumar Kandagatla

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.

Appreciate your opinion on this topic on social media by tagging us @wittysparks
  • LinkedIn
  • Twitter
  • Like
  • Pinterest

Related Topics

  • 18 Free Open Source CSS Dropdown Navigation Menus
  • Slide-out or Navigation Drawer jQuery Menus for your next web app!
  • CSS Front-end Responsive Frameworks and Grids Compared
Launch Offer
Rocket.net - Managed WordPress hosting
Rocket.net - Managed WordPress hosting
$1 for first month, $25/month

A highly secured WordPress hosting platform powered by Cloudflare enterprises with customized services for agencies, eCommerce, and small businesses.

  • PageSpeed Guarantee
  • Ultra Secure Platform
  • FREE Migrations
  • Automatic Updates
Try for $1.00 Our Review
We earn a commission if you make a purchase, at no additional cost to you.

Our Favorite Tools

Semrush - SEO and Marketing Tools
Semrush - SEO and Marketing Tools
$119.95/mo
Try for FREE Our Review
Semrush - SEO and Marketing Tools
Lasso - All-in-one Affiliate Marketing Plugin for WordPress
$29/month
Start Free Trial Our Review
Semrush - SEO and Marketing Tools
Grammarly - AI-powered writing assistant
$12.00 / month
Try for FREE Our Review
Previous Post: « Create BuddyNet – The DO Mantra by Tata DOCOMO
Next Post: Art and Creativity through some amazing 3D murals »

Reader Interactions

Profile picture for Anonymous

About Sravan Kumar Kandagatla

Founder of 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 Kumar Kandagatla
  • LinkedIN
  • Twitter
  • Pinterest
  • Facebook
  • Instagram

Comments

  1. Profile picture for VivekanandVivekanand says

    May 26, 2010 at 11:06 pm

    This is awesome! is this accessible [I mean have you used any accessibility concept]? to access different section on tab click…

    • Profile picture for adminadmin says

      May 27, 2010 at 7:38 pm

      No Vivek – I have not done anything like that – do you have any resource to check the accessibility? – would appreciate if you can share related article or resources.

  2. Profile picture for AbbasAbbas says

    August 6, 2010 at 12:01 am

    I love this collapsible box. Do you know how I can create a comment box with like and dislike features as in Facebook?
    I would like to integrate that into my website.

  3. Profile picture for Nicola CelientoNicola Celiento says

    July 25, 2011 at 9:58 am

    Great! Good work! Thank you!

  4. Profile picture for Nicola CelientoNicola Celiento says

    July 25, 2011 at 9:58 am

    Great! Good work! Thank you!

Footer

Search

Exclusive Coupons

  • Moqups Review - Use coupon code “WITTYSPARKS" for 20% off or "PARTNERS50" for 50% discount on all plans.
  • Serpstat Review - Use coupon code "wittysparks_discount" for 30% off.
  • WPForms Review - Use coupon code "WITTYSPARKS" for 50% off.
  • WPPayForm Review - Use coupon code "wittysparks" for 10% to 40% off.

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 © 2022 · Hosting sponsored by Rocket.net (Affiliate link)

  • About Us
  • Contact Us
  • Privacy Policy
  • Affiliate Disclosure