Using CSS3 Transitions, Transforms and Animation

Posted: November 22, 2011 in CSS
Tags: , , , , , , ,

Using CSS3 Transitions, Transforms and Animation

Accordions

Plan

  1. Mark up a few sections with a title and content
  2. Set the height to all but the first to 0, and overflow to hidden on all of them
  3. Bind click events on the titles to change the height

Not sure if the use/abuse of Unicode is really a good idea, but you can see that it’s pretty easy to get a simple accordion working.

I’m using classes again here to define different states, then using jQuery to turn them on and off. As always, I could use the :target pseudo selector, but I’d want to use preventDefault() onClick anyway to prevent the page skipping up and down, so I might as well just do it all in jQuery.

The Code

HTML:

<div id="accordion">
	<section id="item1">
		<p>▶</p><h1><a href="#">A long paragraph</a></h1>
		<p>Pellentesque habitant... </p>
	</section>
	<section id="item2">
		<p>▶</p><h1><a href="#">A medium paragraph</a></h1>
		<p>Pellentesque habitant... </p>
	</section>
	<section id="item3">
		<p>▶</p><h1><a href="#">Two short paragraphs</a></h1>
		<p>Pellentesque habitant... </p>
		<p>Pellentesque habitant... </p>
	</section>
</div>

CSS:

#accordion section,	#accordion .pointer, #accordion h1, #accordion p {
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#accordion {
	margin-bottom:30px;
}
#accordion h1 {
	font-size:20px;
	background-color:rgba(255,0,0,0.3);
	margin:0;
	padding: 10px 10px 10px 30px;
}

#accordion h1 a {
	color:black;
}
#accordion section {
	overflow:hidden;
	height:220px;
	border:1px #333 solid;
}
#accordion p {
	padding:0 10px;
	color:black;
}
#accordion section.ac_hidden p:not(.pointer) {
	color:#fff;
}

#accordion section.ac_hidden {
	height:44px;
}
#accordion .pointer {
	padding:0;
	margin:10px 0 0 6px;
	line-height:20px;
	width:13px;
	position:absolute;
}
#accordion section:not(.ac_hidden) h1 {
	background-color:rgba(255,0,0,0.7);
}

#accordion section:not(.ac_hidden) .pointer {
	display:block;
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-o-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	transform:rotate(90deg);
	padding:0;
}

Plus a bit of javascript to turn the classes on and off.

$(document).ready(function() {
	$("#accordion section h1").click(function(e) {
		$(this).parents().siblings("section").addClass("ac_hidden");
		$(this).parents("section").removeClass("ac_hidden");

		e.preventDefault();
	});
});
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s