{"id":7349,"date":"2015-10-07T12:15:10","date_gmt":"2015-10-07T09:15:10","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=7349"},"modified":"2017-12-21T16:10:04","modified_gmt":"2017-12-21T14:10:04","slug":"jquery-ui-accordion-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-accordion-example\/","title":{"rendered":"jQuery UI Accordion Example"},"content":{"rendered":"

The aim of this example is to go through jQuery UI Accordion. The .accordion(options)<\/code> method declares that an HTML element and its contents should be treated and managed as accordion menus. The options parameter is an object that specifies the appearance and behavior of the menu involved.<\/p>\n

Accordions are more and more finding their way into websites as navigation through a lot of pages and content is getting boring. That’s where accordions play an important role in organising content into expandable boxes which can have a lot of options to be customized just the way you want.<\/p>\n

We’ll start with a basic application and then will explore more advanced options.
\n[ulp id=’qGGDqWnle19VavkM’]<\/p>\n

1. Basic Document Setup<\/h2>\n

To begin, create a new HTML document and add the following syntax in it:<\/p>\n

\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>jQuery UI Accordion Example<\/title>\r\n       <meta charset=\"utf-8\">\r\n<!-- LINKS SECTION  -->\r\n<link href=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.11.4\/themes\/smoothness\/jquery-ui.css\" rel=\"stylesheet\" type=\"text\/css\"\/>\r\n<script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.3\/jquery.min.js\"><\/script>\r\n<script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.11.4\/jquery-ui.min.js\"><\/script>\r\n<link href=\"style.css\" rel=\"stylesheet\" type=\"text\/css\"\/>\r\n<\/head>\r\n\r\n<!-- STYLE SECTION  -->\r\n<style type=\"text\/css\">\r\n\r\n<\/style>\r\n<body>\r\n\r\n<!-- HTML SECTION  -->\r\n\r\n\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script type=\"text\/javascript\">\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Note that we’ve linked three essential components: jquery-ui.css<\/code>, jquery.min.js<\/code>, jquery-ui.min.js<\/code>.<\/p>\n
Now we’re ready to add some content in order to show the application of jQuery Accordion.<\/p>\n
2. Accordion Demonstration<\/h2>\n
Create the following structure in HTML:
\n
\"Syntax<\/a>
Syntax of the Structure we are building for Accordion!<\/figcaption><\/figure>
\nNow let’s fill this structured HTML with some text inside:<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n<div id=\"accordion\">\r\n  <h3>Section 1<\/h3>\r\n  <div>\r\n    <p>\r\n    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer\r\n    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit\r\n    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut\r\n    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.\r\n    <\/p>\r\n  <\/div>\r\n  <h3>Section 2<\/h3>\r\n  <div>\r\n    <p>\r\n    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet\r\n    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor\r\n    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In\r\n    suscipit faucibus urna.\r\n    <\/p>\r\n  <\/div>\r\n  <h3>Section 3<\/h3>\r\n  <div>\r\n    <p>\r\n    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.\r\n    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero\r\n    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis\r\n    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.\r\n    <\/p>\r\n    <ul>\r\n      <li>List item one<\/li>\r\n      <li>List item two<\/li>\r\n      <li>List item three<\/li>\r\n    <\/ul>\r\n  <\/div>\r\n  <h3>Section 4<\/h3>\r\n  <div>\r\n    <p>\r\n    Cras dictum. Pellentesque habitant morbi tristique senectus et netus\r\n    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in\r\n    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia\r\n    mauris vel est.\r\n    <\/p>\r\n  <\/div>\r\n<\/div>\r\n<\/pre>\n
The basic syntax for jQuery UI Accordion application is: $(selector, context).accordion (options);<\/code> By applying it in our example we’d get:<\/p>\n
\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script type=\"text\/javascript\">\r\n$(function() {\r\n    $( \"#accordion\" ).accordion();\r\n});\r\n<\/script>\r\n<\/pre>\n
This code creates an accordion for the structured div that has the id of accordion<\/code>. Note that it is only going to work if the whole thing is declared as an anonymous function.  The result we’d get in the browser would be:
\n\"accordion2\"<\/a><\/p>\n
3. Accordion Examples<\/h2>\n
Below, we’ll have a look at the various cases and examples in which we can use accordions.<\/p>\n
3.1 Collapse Content<\/h3>\n
By default, accordions always keep one section open. To allow for all sections to be be collapsible, set the collapsible<\/code> option to true<\/code>. Your code would look something like this:<\/p>\n
\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script type=\"text\/javascript\">\r\n$(function() {\r\n    $( \"#accordion\" ).accordion({\r\n        collapsible: true\r\n    });\r\n});\r\n<\/script>\r\n<\/pre>\n
\"accordion3\"<\/a><\/p>\n
3.2 Customize Icons<\/h3>\n
Customize the header icons with the icons option, which accepts classes for the header’s default and active (open) state. You can use any class from the UI CSS framework, or create custom classes with background images. Example:<\/p>\n
\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script type=\"text\/javascript\">\r\nvar icons = {\r\n      header: \"ui-icon-circle-arrow-e\",\r\n      activeHeader: \"ui-icon-circle-arrow-s\"\r\n    };\r\n$(function() {\r\n    $( \"#accordion\" ).accordion({\r\n        icons: icons\r\n    });\r\n});\r\n<\/script>\r\n<\/pre>\n
\"accordion4\"<\/a><\/p>\n
3.3 Fill Space<\/h3>\n
Because the accordion is comprised of block-level elements, by default its width fills the available horizontal space.<\/p>\n
First, wrap your current HTML inside a new div:<\/p>\n
\r\n<div id=\"accordion-resizer\" class=\"ui-widget-content\">\r\n \/\/ your initial HTML here\r\n<div>\r\n<\/pre>\n
Next, set an initial accordion resizer size to whatever you like.<\/p>\n
\r\n<style type=\"text\/css\">\r\n    #accordion-resizer {\r\n    padding: 10px;\r\n    width: 350px;\r\n    height: 220px;\r\n  }\r\n<\/style>\r\n<\/pre>\n
 To fill the vertical space allocated by its container, set the heightStyle<\/code> option to \"fill\"<\/code>, and the script will automatically set the dimensions of the accordion to the height of its parent container.<\/p>\n
\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script type=\"text\/javascript\">\r\n$(function() {\r\n    $( \"#accordion\" ).accordion({\r\n      heightStyle: \"fill\"\r\n    });\r\n  });\r\n  $(function() {\r\n    $( \"#accordion-resizer\" ).resizable({\r\n      minHeight: 140,\r\n      minWidth: 200,\r\n      resize: function() {\r\n        $( \"#accordion\" ).accordion( \"refresh\" );\r\n      }\r\n    });\r\n  });\r\n<\/script>\r\n<\/pre>\n
\"accordion5\"<\/a><\/p>\n
3.4 No Auto Height<\/h3>\n
Setting heightStyle: \"content\"<\/code> allows the accordion panels to keep their native height.<\/p>\n
\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script type=\"text\/javascript\">\r\n  $(function() {\r\n    $( \"#accordion\" ).accordion({\r\n      heightStyle: \"content\"\r\n    });\r\n  });\r\n<\/script>\r\n<\/pre>\n
\"accordion6\"<\/a><\/p>\n
3.5 Open on Hoverintent<\/h3>\n
Click headers to expand\/collapse content that is broken into logical sections, much like tabs. Optionally, toggle sections open\/closed on mouseover. Because this a bit complicated, you’d better have a closer look in the official jQuery Website: https:\/\/jqueryui.com\/accordion\/#hoverintent<\/a>.<\/p>\n
The result is:
\n\"accordion7\"<\/a><\/p>\n
4. Conclusion<\/h2>\n
To conclude, accordions enable users to click headers to expand\/collapse content that is broken into logical sections, much like tabs. The widget is fast and easy to use in most cases. It is quite a great way to organise content and get more efficent on your website layouts\/spaces. You will find it useful if you want to explain sth with steps, describe people ect.<\/p>\n
5. Download<\/h5>\n
Download<\/strong>
\nYou can download the full source code of this example here: jQuery UI Accordion<\/strong><\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
The aim of this example is to go through jQuery UI Accordion. The .accordion(options) method declares that an HTML element and its contents should be treated and managed as accordion menus. The options parameter is an object that specifies the appearance and behavior of the menu involved. Accordions are more and more finding their way …<\/p>\n","protected":false},"author":75,"featured_media":919,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-7349","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery"],"yoast_head":"\njQuery UI Accordion Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"The aim of this example is to go through jQuery UI Accordion. The .accordion(options) method declares that an HTML element and its contents should be\" \/>\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.webcodegeeks.com\/javascript\/jquery\/jquery-ui-accordion-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jQuery UI Accordion Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"The aim of this example is to go through jQuery UI Accordion. The .accordion(options) method declares that an HTML element and its contents should be\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-accordion-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-10-07T09:15:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-21T14:10:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\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.webcodegeeks.com\/javascript\/jquery\/jquery-ui-accordion-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-accordion-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"jQuery UI Accordion Example\",\"datePublished\":\"2015-10-07T09:15:10+00:00\",\"dateModified\":\"2017-12-21T14:10:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-accordion-example\/\"},\"wordCount\":562,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-accordion-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-accordion-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-accordion-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-accordion-example\/\",\"name\":\"jQuery UI Accordion Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-accordion-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-accordion-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"datePublished\":\"2015-10-07T09:15:10+00:00\",\"dateModified\":\"2017-12-21T14:10:04+00:00\",\"description\":\"The aim of this example is to go through jQuery UI Accordion. The .accordion(options) method declares that an HTML element and its contents should be\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-accordion-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-accordion-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-accordion-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-accordion-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"jQuery\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"jQuery UI Accordion Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"jQuery UI Accordion Example - Web Code Geeks - 2026","description":"The aim of this example is to go through jQuery UI Accordion. The .accordion(options) method declares that an HTML element and its contents should be","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.webcodegeeks.com\/javascript\/jquery\/jquery-ui-accordion-example\/","og_locale":"en_US","og_type":"article","og_title":"jQuery UI Accordion Example - Web Code Geeks - 2026","og_description":"The aim of this example is to go through jQuery UI Accordion. The .accordion(options) method declares that an HTML element and its contents should be","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-accordion-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-10-07T09:15:10+00:00","article_modified_time":"2017-12-21T14:10:04+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-accordion-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-accordion-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"jQuery UI Accordion Example","datePublished":"2015-10-07T09:15:10+00:00","dateModified":"2017-12-21T14:10:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-accordion-example\/"},"wordCount":562,"commentCount":2,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-accordion-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-accordion-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-accordion-example\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-accordion-example\/","name":"jQuery UI Accordion Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-accordion-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-accordion-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","datePublished":"2015-10-07T09:15:10+00:00","dateModified":"2017-12-21T14:10:04+00:00","description":"The aim of this example is to go through jQuery UI Accordion. The .accordion(options) method declares that an HTML element and its contents should be","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-accordion-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-accordion-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-accordion-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-accordion-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"jQuery","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/"},{"@type":"ListItem","position":4,"name":"jQuery UI Accordion Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/7349","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=7349"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/7349\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/919"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=7349"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=7349"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=7349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}