is a professionally managed web design and web development company in Hyderabad, India.
Tuesday, 17 September 2013
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:
We will have five random sections of web-related topics for the accordion’s content, such asHTML5, 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.
<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.
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>
<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.
<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.
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 accordiondiv 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.
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.
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.
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.
Let’s put more details for our accordion, as one pixel can make a lot difference in the final result.
In the snippet above, we added border-right, border-left, border-bottom for one pixel withrgba 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.
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: