ui-accordion-content like this.Īlso, if we have links in the content, we will turn the color to dark grey #777. In case you did not wrap the content within the tag or have other elements, rather than select specifically for p, we will select any direct elements from the. 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. 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.
First, we need to specify the accordion div container for 300px and center it. In this section we will start styling the accordion sections. We will also apply border-box model for box-sizing in all elements, as follows:įurther Reading: CSS Box-sizing Styling the Accordion We also remove the default underline from the link as well as the outline when it is in active or focus state.įurther Reading: Reviewing Styles Priority However, our accordion still looks plain white, so let’s add some styles to it.įirst, 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. When you click on the header, the content will expand, and it will collapse when we click on another header. Then, put the following script after them. 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. Used by over 55% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today.Įach 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.Īt this point, we just work on the HTML markup so nothing will happen yet when we view it in the browser. It was released in January 2006 at BarCamp NYC by John Resig. JQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML.
It is now developed by Adobe Systems, which acquired Macromedia in 2005. It's translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.Īdobe Dreamweaver (formerly Macromedia Dreamweaver) is a proprietary web development application originally created by Macromedia. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. Each module adds new capabilities or extends features defined in CSS 2, over preserving backward compatibility. Unlike CSS 2, which is a large single specification defining various features, CSS 3 is divided into several separate documents called "modules". 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. HTML5 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. Here is the markup based on these 5 topics.
This is just an example you can actually put anything for the content, as long as you keep the markup changed accordingly. We will have five random sections of web-related topics for the accordion’s content, such as HTML5, CSS3, Sass, Dreamweaver and jQuery.
To begin with, let’s put the following div with the id accordion that will contain the entire accordion’s content.
ACCORDION UI HOW TO
Recommended Reading: How to Keep Your CSS3 Code Markup Slim HTML Markup 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.