{"id":16221,"date":"2013-01-21T21:01:08","date_gmt":"2013-01-21T13:01:08","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=16221"},"modified":"2025-04-24T17:01:40","modified_gmt":"2025-04-24T09:01:40","slug":"theming-jquery-ui-accordion","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/theming-jquery-ui-accordion\/","title":{"rendered":"Optimize Your jQuery UI Accordion with Custom Themes"},"content":{"rendered":"<p>In this tutorial, we\u2019ll walk you through the process of creating a custom theme for the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/jqueryui.com\/demos\/accordion\/\">jQuery UI Accordion<\/a>. We\u2019ll leverage various CSS techniques, including <strong><a href=\"https:\/\/www.hongkiat.com\/blog\/css3-first-of-type\/\">structural selectors<\/a><\/strong>, <strong><code>box-sizing<\/code><\/strong>, and <strong><a href=\"https:\/\/www.hongkiat.com\/blog\/css3-linear-gradient\/\">CSS3 gradients<\/a><\/strong>, to enhance your <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/series-html5-css3-tuts\/\/\">CSS skills<\/a>.<\/p>\n<p>By the end of this guide, you\u2019ll have a functional and visually appealing accordion element on your website.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/keep-css3-markup-slim\/\" class=\"ref-block__link\" title=\"Read More: Keeping Your CSS3 Code Markup Slim\" rel=\"bookmark\"><span class=\"screen-reader-text\">Keeping Your CSS3 Code Markup Slim<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/keep-css3-markup-slim.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-11227 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/keep-css3-markup-slim.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Keeping Your CSS3 Code Markup Slim<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tWeb developers can save a lot of time using more sophisticated CSS3 syntax. Users who visit your page...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Understanding HTML Markup for the Accordion<\/h2>\n<p>To kick things off, let\u2019s start by creating a <code>div<\/code> element with the <code>id<\/code> <strong>accordion<\/strong>. This <code>div<\/code> will serve as the container for all the content within our accordion.<\/p>\n<pre>\n  &lt;div id=\"accordion\"&gt;\n  &lt;\/div&gt;\n<\/pre>\n<p>For demonstration purposes, we\u2019ll populate the accordion with five sections focused on <strong>web-related topics<\/strong> like <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/series-html5-css3-tuts\/\/\">HTML5, CSS3<\/a>, Sass, Dreamweaver, and <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/jquery\/\">jQuery<\/a>. Feel free to replace these with any content you\u2019d like, just make sure to adjust the markup accordingly. Below is the markup for these five topics:<\/p>\n<pre>\n  &lt;h4&gt;&lt;a href=\"#\"&gt;HTML5&lt;\/a&gt;&lt;\/h4&gt;\n  &lt;div&gt;\n    &lt;p&gt;\n      &lt;strong&gt;HTML5&lt;\/strong&gt; is a markup language used for structuring web content. It's the fifth version of HTML and is still under development as of July 2012.\n    &lt;\/p&gt;\n  &lt;\/div&gt;\n  &lt;h4&gt;&lt;a href=\"#\"&gt;CSS3&lt;\/a&gt;&lt;\/h4&gt;\n  &lt;div&gt;\n    &lt;p&gt;\n      Unlike CSS2, CSS3 is modular, allowing for easier updates and backward compatibility. &lt;em&gt;&lt;strong&gt;Source:&lt;\/strong&gt; &lt;a href=\"http:\/\/en.wikipedia.org\/wiki\/Css\"&gt;Wikipedia&lt;\/a&gt;&lt;\/em&gt;\n    &lt;\/p&gt;\n  &lt;\/div&gt;\n  &lt;h4&gt;&lt;a href=\"#\"&gt;Sass&lt;\/a&gt;&lt;\/h4&gt;\n  &lt;div&gt;\n    &lt;p&gt;\n      &lt;strong&gt;Sass&lt;\/strong&gt; extends CSS3 by adding features like nested rules and variables, making CSS more enjoyable to write.\n    &lt;\/p&gt;\n  &lt;\/div&gt;\n  &lt;h4&gt;&lt;a href=\"#\"&gt;Dreamweaver&lt;\/a&gt;&lt;\/h4&gt;\n  &lt;div&gt;\n    &lt;p&gt;\n      &lt;strong&gt;Adobe Dreamweaver&lt;\/strong&gt; is a web development tool originally created by Macromedia and now developed by Adobe Systems.\n    &lt;\/p&gt;\n  &lt;\/div&gt;\n  &lt;h4&gt;&lt;a href=\"#\"&gt;jQuery&lt;\/a&gt;&lt;\/h4&gt;\n  &lt;div&gt;\n    &lt;p&gt;\n      &lt;strong&gt;jQuery&lt;\/strong&gt; is a widely-used JavaScript library that simplifies client-side scripting. It was first released in January 2006.\n    &lt;\/p&gt;\n  &lt;\/div&gt;\n<\/pre>\n<p>Each section is made up of an <code>h4<\/code> element, which serves as the header, and a <code>div<\/code> element that contains the content. These are all nested within the <strong>accordion<\/strong> <code>div<\/code> we created earlier.<\/p>\n<p>At this stage, we\u2019re only focusing on the HTML markup. The accordion won\u2019t be functional until we add the necessary JavaScript and CSS.<\/p>\n<h2>Setting Up the jQuery UI Accordion<\/h2>\n<p>To build our accordion, we\u2019ll be using the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/jqueryui.com\/\">jQuery UI<\/a> library. First, make sure to include both the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/jquery.com\">jQuery<\/a> and jQuery UI libraries in the <code>head<\/code> tag of your HTML file. You can link these files directly from the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developers.google.com\/speed\/libraries\">CDN<\/a> as shown below:<\/p>\n<pre>\n  &lt;script type=\"text\/javascript\" src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.7.2\/jquery.min.js\"&gt;&lt;\/script&gt;\n  &lt;script type=\"text\/javascript\" src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.8.21\/jquery-ui.min.js\"&gt;&lt;\/script&gt;\n<\/pre>\n<p>After including the libraries, add the following <code>script<\/code> to initialize the accordion:<\/p>\n<pre>\n  $(function() {\n    $(\"#accordion\").accordion();\n  });\n<\/pre>\n<p>At this point, your accordion should be functional. Clicking on a section header will <strong>expand<\/strong> its content, and clicking on another header will <strong>collapse<\/strong> the previously expanded section.<\/p>\n<p>While the accordion is working, it still lacks visual appeal. Let\u2019s move on to styling it.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"jQuery UI Accordion First Look\" height=\"300\" src=\"https:\/\/assets.hongkiat.com\/uploads\/jquery-ui-accordion\/accordion-first-look.jpg\" width=\"500\"><\/figure>\n<h2>Implementing Basic Styles<\/h2>\n<p>To start, we\u2019ll use <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/necolas\/normalize.css\/\">Normalize.css<\/a> to reset default element styles and ensure <a href=\"https:\/\/www.hongkiat.com\/blog\/complete-guide-to-cross-browser-compatibility-check\/\">cross-browser consistency<\/a>. Next, we\u2019ll set a background color in the <code>html<\/code> tag and remove the default underline from links, as well as the outline when they are active or in focus.<\/p>\n<pre>\n  html {\n    height: 100%;\n    background: #e3e3e0;\n  }\n  a {\n    text-decoration: none;\n  }\n  :focus, :active {\n    outline: 0;\n  }\n<\/pre>\n<p><strong>Further Reading:<\/strong> <a href=\"https:\/\/www.hongkiat.com\/blog\/css-priority-level\/\">Understanding CSS Priority Levels<\/a><\/p>\n<p>Additionally, we\u2019ll apply the <code>border-box<\/code> model for <code>box-sizing<\/code> across all elements, as shown below:<\/p>\n<pre>\n  * {\n    -moz-box-sizing: border-box;\n    -webkit-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n<\/pre>\n<p><strong>Further Reading:<\/strong> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.paulirish.com\/2012\/box-sizing-border-box-ftw\/\">Understanding CSS Box-sizing<\/a><\/p>\n<h2>Customizing the Accordion\u2019s Appearance<\/h2>\n<p>Let\u2019s begin by styling the accordion sections. First, we\u2019ll set the width of the accordion\u2019s <code>div<\/code> container to <code>300px<\/code> and center it on the page.<\/p>\n<pre>\n  #accordion {\n    width: 300px;\n    margin: 50px auto;\n  }\n<\/pre>\n<p>Next, we\u2019ll style the accordion\u2019s content with a light gray background and dark gray text. We\u2019ll also set the font size to <code>10pt<\/code>.<\/p>\n<pre>\n  #accordion .ui-accordion-content {\n    width: 100%;\n    background-color: #f3f3f3;\n    color: #777;\n    font-size: 10pt;\n    line-height: 16pt;\n  }\n<\/pre>\n<p>By default, the content is wrapped in a paragraph tag, which has top and bottom margins. We\u2019ll remove these margins and replace them with <code>20px<\/code> of padding.<\/p>\n<pre>\n  #accordion .ui-accordion-content &gt; * {\n    margin: 0;\n    padding: 20px;\n  }\n<\/pre>\n<p>If the content includes links, we\u2019ll set their color to dark gray (<code>#777<\/code>.<\/p>\n<pre>\n  #accordion .ui-accordion-content a {\n    color: #777;\n  }\n<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Styled jQuery UI Accordion\" height=\"300\" src=\"https:\/\/assets.hongkiat.com\/uploads\/jquery-ui-accordion\/accordion-second-look.jpg\" width=\"500\"><\/figure>\n<p>Moving on, let\u2019s style the accordion headers. These are <code>h3<\/code> tags that also have default top and bottom margins, which we\u2019ll remove.<\/p>\n<pre>\n  #accordion .ui-accordion-header {\n    background-color: #ccc;\n    margin: 0px;\n  }\n<\/pre>\n<p>We\u2019ll also style the anchor tags within the headers. The text will be white, indented by <code>10px<\/code>, and the font size will be reduced to <code>12pt<\/code>.<\/p>\n<pre>\n  #accordion .ui-accordion-header a {\n    color: #fff;\n    line-height: 42px;\n    display: block;\n    font-size: 12pt;\n    width: 100%;\n    text-indent: 10px;\n  }\n<\/pre>\n<p>Lastly, we\u2019ll give each header a unique color using <a href=\"https:\/\/www.hongkiat.com\/blog\/css3-first-of-type\/\">structural selectors<\/a>. For the first header, we\u2019ll use the <code>:first-of-type<\/code> pseudo-class.<\/p>\n<pre>\n  #accordion .ui-accordion-header:first-of-type {\n    background-color: #fa9300;\n    background-image: linear-gradient(to bottom, #fa9300 0%, #dc621e 100%);\n  }\n<\/pre>\n<p><strong>How to Select Headers 2 to 4 Using the <code>:nth-of-type(n)<\/code> Selector<\/strong><\/p>\n<p>If you want to select the second to the fourth headers in your HTML document, you can use the <code>:nth-of-type(n)<\/code> selector. Here\u2019s how:<\/p>\n<pre>\n  \/* For the second header *\/\n  #accordion .ui-accordion-header:nth-of-type(2) {\n    background-color: #389abe;\n    background-image: linear-gradient(to bottom, #389abe 0%, #2a7b99 100%);\n    \/* Additional browser-specific gradients removed for readability *\/\n  }\n\n  \/* For the third header *\/\n  #accordion .ui-accordion-header:nth-of-type(3) {\n    background-color: #f87aa0;\n    background-image: linear-gradient(to bottom, #f87aa0 0%, #c86585 100%);\n    \/* Additional browser-specific gradients removed for readability *\/\n  }\n\n  \/* For the fourth header *\/\n  #accordion .ui-accordion-header:nth-of-type(4) {\n    background-color: #a8b700;\n    background-image: linear-gradient(to bottom, #a8b700 0%, #82922a 100%);\n    \/* Additional browser-specific gradients removed for readability *\/\n  }\n<\/pre>\n<p><strong>Selecting the Last Header Using the <code>:last-of-type<\/code> Selector<\/strong><\/p>\n<p>If you want to select the last header, or in this case, the fifth header, you can use the <code>:last-of-type<\/code> selector. Here\u2019s how to do it:<\/p>\n<pre>\n  \/* For the last header *\/\n  #accordion .ui-accordion-header:last-of-type {\n    background-color: #b3bec4;\n    background-image: linear-gradient(to bottom, #b3bec4 0%, #95a0a4 100%);\n    \/* Additional browser-specific gradients removed for readability *\/\n  }\n<\/pre>\n<p>Now that we\u2019ve applied the styles, let\u2019s take a moment to examine the results.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Accordion Third Look\" height=\"300\" src=\"https:\/\/assets.hongkiat.com\/uploads\/jquery-ui-accordion\/accordion-third-look.jpg\" width=\"500\"><\/figure>\n<p>It\u2019s starting to look good! However, if you\u2019re still confused about how structural selectors work, we recommend reading our previous post, <a href=\"https:\/\/www.hongkiat.com\/blog\/css3-first-of-type\/\">CSS3 First-of-type<\/a>, for a more detailed explanation.<\/p>\n<h2>Final Touches to the Accordion<\/h2>\n<p>Let\u2019s add some finishing touches to our accordion. Even a single pixel can make a significant difference in the final appearance.<\/p>\n<pre>\n  \/* Adding borders and text shadow to accordion header *\/\n  #accordion .ui-accordion-header a {\n    text-shadow: 1px 1px 0px rgba(0,0,0,0.2);\n    border: 1px solid rgba(0, 0, 0, .2);\n    border-top: 1px solid rgba(250, 250, 250, .2);\n  }\n<\/pre>\n<p>In the code snippet above, we added borders on all sides using the <code>rgba<\/code> color mode. The borders are essentially black, but we\u2019ve reduced the intensity to <code>20%<\/code>, making them semi-transparent and creating a darker version of the background.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Accordion with RGBA Borders\" height=\"600\" src=\"https:\/\/assets.hongkiat.com\/uploads\/jquery-ui-accordion\/accordion-rgba.jpg\" width=\"500\"><\/figure>\n<p>We applied the same logic to the <code>border-top<\/code>, but used white instead of black to create a highlighting effect.<\/p>\n<p>If you look closely, you\u2019ll notice that the top border doesn\u2019t seem quite right. To address this, we\u2019ll use a trick to mimic the appearance of a top border.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Accordion Top Border Issue\" height=\"300\" src=\"https:\/\/assets.hongkiat.com\/uploads\/jquery-ui-accordion\/accordion-to-border.jpg\" width=\"500\"><\/figure>\n<p>We\u2019ll add an inner shadow with a negative vertical length. However, we don\u2019t need this shadow for the last section, so we\u2019ll remove it. Additionally, we\u2019ll add another inner shadow at the top to create the illusion of a header shadow.<\/p>\n<pre>\n  \/* Adding inner shadows to accordion content *\/\n  #accordion .ui-accordion-content {\n    box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, .4),\n    inset 0px 1px 1px 0px rgba(0, 0, 0, .2);\n  }\n\n  \/* Removing inner shadow for the last section *\/\n  #accordion .ui-accordion-content:last-of-type {\n    box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, .2);\n  }\n<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Final Accordion Appearance\" height=\"300\" src=\"https:\/\/assets.hongkiat.com\/uploads\/jquery-ui-accordion\/accordion-final.jpg\" width=\"500\"><\/figure>\n<h2>Supporting Internet Explorer<\/h2>\n<p>Let\u2019s not forget about Internet Explorer. Unfortunately, the <code>:nth-of-type<\/code> selector isn\u2019t supported in versions IE6 to IE8. For better compatibility, you can use <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/mootools.net\">Mootools<\/a> and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/keithclark\/selectivizr\">Selectivizr.js<\/a>.<\/p>\n<p>Insert the following lines of code before your jQuery and jQuery UI scripts:<\/p>\n<pre>\n  &lt;script type=\"text\/javascript\" src=\"js\/mootools.js\"&gt;&lt;\/script&gt;\n  &lt;script type=\"text\/javascript\" src=\"js\/selectivizr.js\"&gt;&lt;\/script&gt;\n<\/pre>\n<p>You can now check out the live demo and download the source code for our accordion using the links below:<\/p>\n<div class=\"button\">\n    <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hongkiat.github.io\/jquery-ui-accordion\/\">Demo<\/a>\n    <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/hongkiat\/jquery-ui-accordion\/\">Download Source<\/a>\n<\/div>\n<h2>Concluding Thoughts<\/h2>\n<p>We\u2019ve covered all the steps in this tutorial. New selectors like <code>:nth-of-type<\/code> and properties like <code>box-sizing<\/code> in CSS3 offer numerous advantages and solve many challenges in web design.<\/p>\n<p>For instance, we used the <code>:nth-of-type<\/code> selector to target each accordion header without needing extra classes. We also utilized <code>box-sizing<\/code> to eliminate the need for calculating element widths. Additionally, by using CSS3 gradients for the headers, we reduced the number of HTTP requests.<\/p>\n<p>Thank you for reading this tutorial. I hope you found it informative and enjoyable.<\/p>","protected":false},"excerpt":{"rendered":"<p>In this tutorial, we\u2019ll walk you through the process of creating a custom theme for the jQuery UI Accordion. We\u2019ll leverage various CSS techniques, including structural selectors, box-sizing, and CSS3 gradients, to enhance your CSS skills. By the end of this guide, you\u2019ll have a functional and visually appealing accordion element on your website. Understanding&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,3395,352],"tags":[3655,507,506,911],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Style jQuery UI Accordion<\/title>\n<meta name=\"description\" content=\"In this tutorial, we&#039;ll walk you through the process of creating a custom theme for the jQuery UI Accordion. We&#039;ll leverage various CSS techniques,\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/theming-jquery-ui-accordion\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Optimize Your jQuery UI Accordion with Custom Themes\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, we&#039;ll walk you through the process of creating a custom theme for the jQuery UI Accordion. We&#039;ll leverage various CSS techniques,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/theming-jquery-ui-accordion\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2013-01-21T13:01:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-24T09:01:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/jquery-ui-accordion\/accordion-first-look.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/theming-jquery-ui-accordion\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/theming-jquery-ui-accordion\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Optimize Your jQuery UI Accordion with Custom Themes\",\"datePublished\":\"2013-01-21T13:01:08+00:00\",\"dateModified\":\"2025-04-24T09:01:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/theming-jquery-ui-accordion\\\/\"},\"wordCount\":925,\"commentCount\":22,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/theming-jquery-ui-accordion\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-ui-accordion\\\/accordion-first-look.jpg\",\"keywords\":[\"Content Accordion\",\"CSS\",\"HTML\",\"jQuery\"],\"articleSection\":[\"Coding\",\"UI\\\/UX\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/theming-jquery-ui-accordion\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/theming-jquery-ui-accordion\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/theming-jquery-ui-accordion\\\/\",\"name\":\"How to Style jQuery UI Accordion\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/theming-jquery-ui-accordion\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/theming-jquery-ui-accordion\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-ui-accordion\\\/accordion-first-look.jpg\",\"datePublished\":\"2013-01-21T13:01:08+00:00\",\"dateModified\":\"2025-04-24T09:01:40+00:00\",\"description\":\"In this tutorial, we'll walk you through the process of creating a custom theme for the jQuery UI Accordion. We'll leverage various CSS techniques,\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/theming-jquery-ui-accordion\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/theming-jquery-ui-accordion\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/theming-jquery-ui-accordion\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-ui-accordion\\\/accordion-first-look.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-ui-accordion\\\/accordion-first-look.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/theming-jquery-ui-accordion\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Optimize Your jQuery UI Accordion with Custom Themes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Style jQuery UI Accordion","description":"In this tutorial, we'll walk you through the process of creating a custom theme for the jQuery UI Accordion. We'll leverage various CSS techniques,","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/theming-jquery-ui-accordion\/","og_locale":"en_US","og_type":"article","og_title":"Optimize Your jQuery UI Accordion with Custom Themes","og_description":"In this tutorial, we'll walk you through the process of creating a custom theme for the jQuery UI Accordion. We'll leverage various CSS techniques,","og_url":"https:\/\/www.hongkiat.com\/blog\/theming-jquery-ui-accordion\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-01-21T13:01:08+00:00","article_modified_time":"2025-04-24T09:01:40+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/jquery-ui-accordion\/accordion-first-look.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/theming-jquery-ui-accordion\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/theming-jquery-ui-accordion\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Optimize Your jQuery UI Accordion with Custom Themes","datePublished":"2013-01-21T13:01:08+00:00","dateModified":"2025-04-24T09:01:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/theming-jquery-ui-accordion\/"},"wordCount":925,"commentCount":22,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/theming-jquery-ui-accordion\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/jquery-ui-accordion\/accordion-first-look.jpg","keywords":["Content Accordion","CSS","HTML","jQuery"],"articleSection":["Coding","UI\/UX","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/theming-jquery-ui-accordion\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/theming-jquery-ui-accordion\/","url":"https:\/\/www.hongkiat.com\/blog\/theming-jquery-ui-accordion\/","name":"How to Style jQuery UI Accordion","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/theming-jquery-ui-accordion\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/theming-jquery-ui-accordion\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/jquery-ui-accordion\/accordion-first-look.jpg","datePublished":"2013-01-21T13:01:08+00:00","dateModified":"2025-04-24T09:01:40+00:00","description":"In this tutorial, we'll walk you through the process of creating a custom theme for the jQuery UI Accordion. We'll leverage various CSS techniques,","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/theming-jquery-ui-accordion\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/theming-jquery-ui-accordion\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/theming-jquery-ui-accordion\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/jquery-ui-accordion\/accordion-first-look.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/jquery-ui-accordion\/accordion-first-look.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/theming-jquery-ui-accordion\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Optimize Your jQuery UI Accordion with Custom Themes"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4dD","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16221","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=16221"}],"version-history":[{"count":5,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16221\/revisions"}],"predecessor-version":[{"id":74085,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16221\/revisions\/74085"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=16221"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=16221"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=16221"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=16221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}