Styling an Accordion with CSS

Styling an Accordion with CSS

October 30th, 2008

When creating this site, I wanted to have a light weight accordion to organize my work experience details on my “About” page. I did a quick google search and found a very easy to install and light weight accordion created by Dezinerfolio (Developed by Navdeep and Naveen from Bangalore, India). I would just like to share how I used their accordion and made it sexier using CSS.

Materials

Before getting started, download their Simple Javascript Accordion at www.dezinerfolio.com

1. Download the Accordion pack from their site
2. Leave a thank you comment since we got it for free!
3. Un-zip the files, and open Basic.html

Now we are ready to start!

Creating Sexy Accordions – Photoshop Tutorial

If you are already a whiz with Photoshop, you can skim through my Photoshop section, just get the general idea and go ahead and create your own sexy CSS accordion.

1. Open a new document with the size of 300px width and 25px height. We will be creating the default state of the accordion first.
2. Create a new layer (Ctrl+ Shift + N) and name this “Accordion Base”. This is the foundation of your default accordion.
3. Select the entire canvas (Ctrl + A) and fill it with any color (Alt + Delete). Now lets add some layer style to this by double clicking on the layer thumbnail. Check the Gradient Overlay option and give it a nice gradient and stretch the scale to 150%. (I chose these color codes: #2b507c & #1d385a)
4. Create a new layer (Ctrl + Shift + N) and name this layer “Bevel”. Go to your Photoshop Tool’s Palette and select the Horizontal Single Row Marquee Tool.
5. With the selection tool, start at the 2nd pixel from the top of your canvas, and fill that area with white (Have the foreground color set to white and press Alt + Delete). You will now have a horizontal white 1px line across the top of your canvas. Go to your Layer’s Palette and turn the opacity down to 30%. You now should have a faint line across the top of your canvas.
6. Now go to your Photoshop Palette, and choose the Ellipse Tool, and draw a circle on the left side of the accordion. Note* By holding the Shift key while dragging your tool, this will create a perfect proportioned circle. I also added a light drop shadow and a gradient (White to light Grey)on my layer styles.
   
7. Now create a triangle inside of that circle you just created. (If you select the custom shape tool, there is a default triangle for you by default). Now you should have something like this below.
8. Key in Photoshop is to be organized as possible, so lets now group our accordion layers into one. In your Layer Palette, select all four layers you just created and group them (Ctrl + G). Double click in the Group layer and name this “Default”.
9. Now that we are complete with our default accordion, its time to create the hover and active state. We will expand our canvas height to 75px (Ctrl + Alt + C). Be sure your anchor starts from the top and points to the bottom.
10. Select the “Default” group, and right click and choose “Duplicate Group…”. Do this one more time, now you should have three identical groups. Rename the duplicated folder to “Active” and “Hover”. With each group selected, starting with the “Hover” group, move them down to its appropriate place. See below for example.
    
11. Now lets adjust the colors on our duplicated groups. Double click on the “Accordion Base” layer in each layer and adjust the gradient colors. See below for the color codes that I chose.
12. Last step! Select the arrow shape in your “Active” group, and rotate it 90 degrees so its pointing to the right (Ctrl + T). Note* Holding shift while rotating will allow you to rotate it more precisely.

Final Output

Styling Your Accordion - CSS

Now its time to add the background image we just created to our accordion.

We will start by styling the “Default” state of the accordion. By default, the background position will start from Left (0px) and Top (0px).

.accordion_headings{
	padding: 5px 5px 5px 25px;
	background: url(accordion_a.gif) no-repeat left top;
	color:#fff;
	border:1px solid #fff;
	cursor:pointer;
	font-weight:bold;
}

Then we will style the hover effect. Our background position will now be left (0px) and Top (-25px).

.accordion_headings:hover{
	background-position: left -25px;
}

Then the active state with our background position as left (0px) and top (-50px). We also want the active state to not look clickable, so lets make our cursor property to “text”. Take notice on the CSS Specificity, I added the parent ID of “basic-accordion” so that it will overrule the hover state.

#basic-accordian .header_highlight{
	color: #222;
	background-position: left -50px;
	cursor: text;
}

Final Output

.accordion_headings{
	padding:5px 5px 5px 25px;
	background: url(accordion_a.gif) no-repeat;
	color:#fff;
	border:1px solid #fff;
	cursor:pointer;
	font-weight:bold;
}
.accordion_headings:hover{
	background-position: left -25px;
}
#basic-accordian .header_highlight{
	color: #222;
	background-position: left -50px;
	cursor: text;
}
.accordion_child{
	padding:15px;
	background:#EEE;
}

Hope this tutorial helped, feel free to let me know if you have any questions. Big thanks to the guys at www.dezinerfolio.com, they did a great job with this simple and easy to implement accordion!

Tags: Accordion, Photoshop, Tutorial

This entry was posted on Thursday, October 30th, 2008 at 3:36 pm and is filed under CSS/XHTML, Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.