Theming jQuery UI Accordion

In this post we are going to create something real and functional, and we are going to make use of the structural selector , box-sizing and CSS3 gradients from our previous lessons to create a custom theme for jQuery UI Accordion and sharpen our CSS skills.

Here is what the final result is going to look like:

Recommended Reading: How to Keep Your CSS3 Code Markup Slim

HTML Markup

To begin with, let’s put the following div with the id accordion that will contain the entire accordion’s content.


<div id="accordion">
        <!-- the content -->
</div>

We will have five random sections of web-related topics for the accordion’s content, such as HTML5, CSS3, Sass, Dreamweaver and jQuery. This is just an example; you can actually put anything for the content, as long as you keep the markup changed accordingly. Here is the markup based on these 5 topics.


<h3><a href="#">HTML5</a></h3>
<div>
        <p>
                <strong>HTML5</strong> is a markup language for structuring and presenting content for the World Wide Web, and is a core technology of the Internet originally proposed by Opera Software. It is the fifth revision of the HTML standard (created in 1990 and standardized as HTML4 as of 1997) and, as of July 2012, is still under development.
        </p>
</div>
<h3><a href="#">CSS3</a></h3>
<div>
        <p>
                Unlike CSS 2, which is a large single specification defining various features, CSS 3 is divided into several separate documents called "modules". Each module adds new capabilities or extends features defined in CSS 2, over preserving backward compatibility. <em><strong>Source:</strong> <a href="http://en.wikipedia.org/wiki/Css">WikiPedia.org</a></em>
        </p>
</div>
<h3><a href="#">Sass</a></h3>
<div>
        <p>
                <strong>Sass</strong> makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It's translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.
        </p>
</div>
<h3><a href="#">Dreamweaver</a></h3>
<div>
        <p>
                <strong>Adobe Dreamweaver</strong> (formerly Macromedia Dreamweaver) is a proprietary web development application originally created by Macromedia. It is now developed by Adobe Systems, which acquired Macromedia in 2005.
        </p>
</div>
<h3><a href="#">jQuery</a></h3>
<div>
        <p>
                <strong>jQuery</strong> is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig. Used by over 55% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today.
        </p>
</div>

Each section consists of an h3 that will become the section’s header and a div that will wrap the section’s content entirely, and then we put them inside the accordion div that we’ve created before.

At this point, we just work on the HTML markup so nothing will happen yet when we view it in the browser.

jQuery UI Accordion

Our accordion will be based on the jQuery UI, so we need both the jQuery and jQuery UI libraries to be included in the head tag and we will link those files directly from the CDN, as follows.


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>

Then, put the following script after them.


$(function() {
        $("#accordion").accordion();
});

Now, the accordion should already work. When you click on the header, the content will expand, and it will collapse when we click on another header.

However, our accordion still looks plain white, so let’s add some styles to it.

Basic Styles

First, we need to reset all the default element styles to maintain style consistency across different browsers with Normalize.css, and then we add a background color in the html tag. We also remove the default underline from the link as well as the outline when it is in active or focus state.


html {
        height: 100%;
        background: #e3e3e0;
}
a {
        text-decoration: none;
}
:focus, :active {
        outline: 0;
}

Further Reading: Reviewing Styles Priority

We will also apply border-box model for box-sizing in all elements, as follows:


* { 
        -moz-box-sizing: border-box; 
        -webkit-box-sizing: border-box; 
        box-sizing: border-box;
}

Further Reading: CSS Box-sizing

Styling the Accordion

In this section we will start styling the accordion sections. First, we need to specify the accordion div container for 300px and center it.


#accordion {
        width: 300px;
        margin: 50px auto;
}

The accordion’s content will have a slightly white color while the text inside it will have a dark grey color #777, then we will also reduce the font size to 10pt.


#accordion .ui-accordion-content {
        width: 100%;
        background-color: #f3f3f3;
        color: #777;
        font-size: 10pt;
        line-height: 16pt;
}

The content is wrapped with a paragraph tag, this tag by default has a top and bottom margin, so here we will remove the margins and replace them with 20px of padding.

In case you did not wrap the content within the <p> tag or have other elements, rather than select specifically for p, we will select any direct elements from the .ui-accordion-content like this.


#accordion .ui-accordion-content > * {
        margin: 0;
        padding: 20px;
}

Also, if we have links in the content, we will turn the color to dark grey #777.


#accordion .ui-accordion-content a {
        color: #777;
}

Next, we will style the accordion header; the accordion header is an h3 tag which by default has a top and bottom margin as well, so we need to remove them both.


#accordion .ui-accordion-header {
        background-color: #ccc;
        margin: 0px;
}

We also need to put some styles to the anchor tag inside the header. We will turn the text on the anchor tag white, indent the text for 10px, and lastly reduce the font size to 12pt.


#accordion .ui-accordion-header a {
        color: #fff;
        line-height: 42px;
        display: block;
        font-size: 12pt;
        width: 100%;
        text-indent: 10px;
}

We will give each header a different color. This can be done by selecting each header with the structural selectors, and as for the first header, we can select it by using the :first-of-type;


#accordion .ui-accordion-header:first-of-type {
        background-color: #fa9300;
        background-image: -moz-linear-gradient(top,  #fa9300 0%, #dc621e 100%); /* FF3.6+ */
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fa9300), color-stop(100%,#dc621e)); /* Chrome,Safari4+ */
        background-image: -webkit-linear-gradient(top,  #fa9300 0%,#dc621e 100%); /* Chrome10+,Safari5.1+ */
        background-image: -o-linear-gradient(top,  #fa9300 0%,#dc621e 100%); /* Opera 11.10+ */
        background-image: -ms-linear-gradient(top,  #fa9300 0%,#dc621e 100%); /* IE10+ */
        background-image: linear-gradient(to bottom,  #fa9300 0%,#dc621e 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa9300', endColorstr='#dc621e',GradientType=0 ); /* IE6-9 */
}

For the second to the fourth header we can select them using the :nth-of-type(n) selector, as follows;


#accordion .ui-accordion-header:nth-of-type(2) {
        background-color: #389abe;
        background-image: -moz-linear-gradient(top,  #389abe 0%, #2a7b99 100%); /* FF3.6+ */
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#389abe), color-stop(100%,#2a7b99)); /* Chrome,Safari4+ */
        background-image: -webkit-linear-gradient(top,  #389abe 0%,#2a7b99 100%); /* Chrome10+,Safari5.1+ */
        background-image: -o-linear-gradient(top,  #389abe 0%,#2a7b99 100%); /* Opera 11.10+ */
        background-image: -ms-linear-gradient(top,  #389abe 0%,#2a7b99 100%); /* IE10+ */
        background-image: linear-gradient(to bottom,  #389abe 0%,#2a7b99 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#389abe', endColorstr='#2a7b99',GradientType=0 ); /* IE6-9 */
}
#accordion .ui-accordion-header:nth-of-type(3) {
        background-color: #f87aa0; /* Old browsers */
        background-image: -moz-linear-gradient(top, #f87aa0 0%, #c86585 100%); /* FF3.6+ */
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f87aa0), color-stop(100%,#c86585)); /* Chrome,Safari4+ */
        background-image: -webkit-linear-gradient(top, #f87aa0 0%,#c86585 100%); /* Chrome10+,Safari5.1+ */
        background-image: -o-linear-gradient(top, #f87aa0 0%,#c86585 100%); /* Opera 11.10+ */
        background-image: -ms-linear-gradient(top,  #f87aa0 0%,#c86585 100%); /* IE10+ */
        background-image: linear-gradient(to bottom,  #f87aa0 0%,#c86585 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f87aa0', endColorstr='#c86585',GradientType=0 ); /* IE6-9 */
}
#accordion .ui-accordion-header:nth-of-type(4) {
        background-color: #a8b700;
        background-image: -moz-linear-gradient(top,  #a8b700 0%, #82922a 100%);
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a8b700), color-stop(100%,#82922a)); /* Chrome,Safari4+ */
        background-image: -webkit-linear-gradient(top,  #a8b700 0%,#82922a 100%); 
        background-image: -o-linear-gradient(top,  #a8b700 0%,#82922a 100%);
        background-image: -ms-linear-gradient(top,  #a8b700 0%,#82922a 100%);
        background-image: linear-gradient(to bottom,  #a8b700 0%,#82922a 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8b700', endColorstr='#82922a',GradientType=0 ); /* IE6-9 */
}

… for the fifth or in this case the last header, we can select it by using the :last-of-type;


#accordion .ui-accordion-header:last-of-type {
        background-color: #b3bec4;
        background-image: -moz-linear-gradient(top,  #b3bec4 0%, #95a0a4 100%);
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b3bec4), color-stop(100%,#95a0a4));
        background-image: -webkit-linear-gradient(top,  #b3bec4 0%,#95a0a4 100%);
        background-image: -o-linear-gradient(top,  #b3bec4 0%,#95a0a4 100%);
        background-image: -ms-linear-gradient(top,  #b3bec4 0%,#95a0a4 100%);
        background-image: linear-gradient(to bottom,  #b3bec4 0%,#95a0a4 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3bec4', endColorstr='#95a0a4',GradientType=0 ); /* IE6-9 */
}

Alright, now let’s have a look at the result for a while.

It starts looking good, however, you may have realized that we did not explain everything about the structural selector in details, so if you are confused about how this type of selector works, we suggest you read our previous post first, CSS3 First-of-type, and come back afterward.

Last Details

Let’s put more details for our accordion, as one pixel can make a lot difference in the final result.


#accordion .ui-accordion-header a {
        text-shadow: 1px 1px 0px rgba(0,0,0,0.2);
        text-shadow: 1px 1px 0px rgba(0,0,0,0.2);
        border-right: 1px solid rgba(0, 0, 0, .2);
        border-left: 1px solid rgba(0, 0, 0, .2);
        border-bottom: 1px solid rgba(0, 0, 0, .2);
        border-top: 1px solid rgba(250, 250, 250, .2);
}

In the snippet above, we added border-right, border-left, border-bottom for one pixel with rgba color mode.

The borders color are actually black, but since we lower the intensity to 20%, the color became transparent and produced a sort of darker-color-version of the background.

We also did the same for the border-top, but we apply a white color instead of black to create a sort of highlighting effect.

However, if you take a look at the header closely, the top side just doesn’t look right; it seems like the header has no border at the top, so here we will do a trick to mimic the border-top as we are not able to add border-top twice at a single rule set.

Here is how we do it. We add an inner shadow with a negative value for the vertical length, but since we don’t need this inner shadow for the last section, we will just remove it.

We also add another inner shadow but this shadow will appear at the top, so it will look like the header’s shadow.


#accordion .ui-accordion-content {
        box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, .4),
                                inset 0px 1px 1px 0px rgba(0, 0, 0, .2);
}
#accordion .ui-accordion-content:last-of-type {
        box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, .2),
                                inset 0px 0 0px 0px rgba(0, 0, 0, .5);
}

Internet Explorer

Last but not least, let’s don’t forget our friend Internet Explorer. The :nth-of-type selector and its kind currently is not supported in IE6 to IE8, so should you want better compatibility in IE, you can use Mootools and Selectivizr.js.

Put the following two lines, before the jQuery and jQuery UI:


<!--[if lte IE 8]>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/selectivizr.js"></script>
<![endif]-->

Finally, we can now see the live demo and download the source of our accordion from the links below.

Demo

Download Source

Final Words

We have come through all the steps. As you can see, each new selectors like the :nth-of-type and new properties like the box-sizing in CSS3 come with many benefits and solve many problems in web design.

In this tutorial we have used the :nth-of-type to select each accordion’s header without adding extra classes or using classes generated from the jQuery UI, we have also used box-sizing so that we have no worries calculating the proper width of the element. And since we have used CSS3 Gradients for the headers, we have fewer HTTP requests.

Thank you for reading this tutorial, I hope you enjoyed it.