Skip to content

CSS3: Accordion effect

May 15, 2011

Accordion effect is a sliding (expandable & collapsable) effect, which is used to show and hide a section of your web page. It is a set of panel of fixed size that slide and opens to reveal the contents of a panel, usually you would open only one panel at a time whereas the other panels are hidden. Have a look at this accordion example, which is accomplished using JQuery. JQuery is a very strong and my favourite javascript framework. I have made a similar effect only with CSS3 and no javascript required.

CSS3 Accordion Effect

The important thing should be noted that this works best in recent version of Chrome, Safari, Mozilla and Opera, other browsers that supports ‘:target’ pseudo class will still function on core level but wont animate the slide effect.

XHTML

<div class="accordion_container"> 
	<dl> 
		<dt><a href="#home">Home</a></dt> 
		<dd id="home"> 
			<p>Home. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
		</dd>
	</dl>

	<dl> 
		<dt><a href="#services">Services</a></dt> 
		<dd id="services"> 
			<p>Services. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
		</dd> 
	</dl>
	
   <dl> 
	    <dt><a href="#boutme">About Me</a></dt> 
		<dd id="boutme"> 
			<p>About me. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
		</dd>
	</dl>
    
	<dl> 
		<dt><a href="#contact">Contact</a></dt> 
		<dd id="contact"> 
			<p>Contact. Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> 
		</dd>
	</dl>
</div>

The above code uses definition list, which similar to ordered list and unordered list, to create the accordion effect. The ‘dt’ tag holds the target that we click and ‘dd’ holds the content that is displayed.

CSS

.accordion_container
{
	float:left;
	clear:both;
	width:970px;
}

.accordion_container dl dt
{
	padding:10px 15px;
	margin:1px 0;
	
	background: #0e3a58;
	
	background:
        -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(#2597e4),
            to(#0e3a58)
	);
	background:
        -moz-linear-gradient(
            top,
            #2597e4,
            #0e3a58
	);
	
	background:
        -o-linear-gradient(
            top,
            #2597e4,
            #0e3a58
	);
	
	-moz-border-radius: 5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}

.accordion_container dl dt a
{
	text-decoration:none;
	color:#9eacb6;
	font-weight:bold;
	text-shadow:-1px 1px 3px #000000;
	display:block;
}

.accordion_container dl dd
{
	height:0;
	border:1px solid #0e3a58;
	overflow:hidden;
	
	-moz-border-radius: 5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	
	-webkit-transition: height 1s ease;
	-moz-transition: height 1s ease;
	-o-transition: height 1s ease;
}

.accordion_container dl dd p
{
	color:#9eacb6;
	padding:10px 15px;
}

.accordion_container dl dd:not(:target)
{
	height:0em;
	border:1px solid #252525;
}

.accordion_container dl dd#home:target
{
	height:16em;
}

.accordion_container dl dd#services:target
{
	height:14em;
}

.accordion_container dl dd#boutme:target
{
	height:16em;
}

.accordion_container dl dd#contact:target
{
	height:14em;
}

The CSS contains some important properties which were as follows,

Gradient Property

background:
    -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(#2597e4),
            to(#0e3a58)
    );
    background:
        -moz-linear-gradient(
            top,
            #2597e4,
            #0e3a58
    );
    
    background:
        -o-linear-gradient(
            top,
            #2597e4,
            #0e3a58
    );

This property creates a gradient effect for the targets (Home, Services, About me and Contact).

Transition Property

.accordion_container dl dd
{
	height:0;
	border:1px solid #0e3a58;
	overflow:hidden;
	
	-moz-border-radius: 5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	
	-webkit-transition: height 1s ease; //property, duration and timing fucntion
	-moz-transition: height 1s ease;
	-o-transition: height 1s ease;
}

The CSS for the tag ‘dd’, which holds the content to be displayed. Note that, we are not using the ‘display: none’ property which doesn’t work here, instead ‘height: 0’ is used. We need set the transition property as ‘height’, so that it creates the sliding effect when the height is increased.

Height Property

.accordion_container dl dd#home:target
{
	height:16em;
}

.accordion_container dl dd#services:target
{
	height:14em;
}

.accordion_container dl dd#boutme:target
{
	height:16em;
}

.accordion_container dl dd#contact:target
{
	height:14em;
}

Every ‘dd’ tags holds different types of content, which is larger or smaller according to your description, so we need to create seperate height for all ‘dd’ when the ‘dt’ is clicked. Thats it! You have created an Accordion effect only using CSS3.

Advertisements

From → CSS3

One Comment
  1. Deepika Mothilal permalink

    wonderful work dude..:)

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

%d bloggers like this: