{"id":5542,"date":"2015-07-13T12:15:44","date_gmt":"2015-07-13T09:15:44","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=5542"},"modified":"2018-01-08T14:19:50","modified_gmt":"2018-01-08T12:19:50","slug":"css-accordion-menu-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/css\/css-accordion-menu-example\/","title":{"rendered":"CSS Accordion Menu Example"},"content":{"rendered":"

The aim of this example is to explain how to create a CSS accordion menu.<\/p>\n

Accordion menus are menus whose content can be expanded in width or height, usually with a smooth wipe effect, to show more of something.<\/p>\n

Until now, this has been achieved using mostly javascript (jQuery), but as you may have realised by now, those are far less practical than css.<\/p>\n

As long as these kind of menus will be coded using only CSS and HTML, it is supported by all modern browsers and you can use whatever you want. <\/p>\n

Let us see a full example of the creation and then some code snippets.
\n 
\n[ulp id=’nAkUl5IbAjqlXSla’]<\/p>\n

1. Basic Setup<\/h2>\n

Go ahead and create a new html document and add the basic syntax in it like so:<\/p>\n

\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>CSS Accordion Menu Example<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<!-- STYLE SECTION -->\r\n\r\n<style type=\"text\/css\">\r\n\r\n<\/style>\r\n\r\n<!-- HTML SECTION -->\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
2. Creating the Accordion Menu<\/h2>\n
In this section, we will see in detail how we can set up the html and css for an accordion menu.<\/p>\n
2.1 Setting up the HTML <\/h2>\n
We will be going through an example that uses checkboxes where no content section is open by default (the input doesn’t need to be \u2018checked\u2019). Everything will be wrapped in a container with the class ac-container<\/code>. For each item, we will have a checkbox, a label and an article which is the content section of that item. Lets also add the content of the tabs.<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n<div class=\"container\">\r\n<section class=\"ac-container\">\r\n<div>\r\n\t<input id=\"ac-1\" name=\"accordion-1\" type=\"checkbox\" \/>\r\n\t<label for=\"ac-1\">About us<\/label>\r\n\t<article class=\"ac-small\">\r\n\t\t<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.<\/p>\r\n\t<\/article>\r\n<\/div>\r\n<div>\r\n\t<input id=\"ac-2\" name=\"accordion-1\" type=\"checkbox\" \/>\r\n\t<label for=\"ac-2\">How we work<\/label>\r\n\t<article class=\"ac-medium\">\r\n\t\t<p>Like you, I used to think the world was this great place where everybody lived by the same standards I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if you're not willing to play by his rules, then you're gonna have to pay the price. <\/p>\r\n\t<\/article>\r\n<\/div>\r\n<div>\r\n\t<input id=\"ac-3\" name=\"accordion-1\" type=\"checkbox\" \/>\r\n\t<label for=\"ac-3\">References<\/label>\r\n\t<article class=\"ac-large\">\r\n\t\t<p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man. <\/p>\r\n\t<\/article>\r\n<\/div>\r\n<div>\r\n\t<input id=\"ac-4\" name=\"accordion-1\" type=\"checkbox\" \/>\r\n\t<label for=\"ac-4\">Contact us<\/label>\r\n\t<article class=\"ac-large\">\r\n\t\t<p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic. <\/p>\r\n\t<\/article>\r\n<\/div>\r\n<\/section>\r\n<\/div>\r\n<\/pre>\n
Note that we need to give each input an ID which we will then use in the for attribute of the label. We need this in order to check the checkbox when clicking on the label. Each article will have a class that will help us determine to which height we it to expand to. (Optimally, we could use \u2018auto\u2019 as the expanded height value, but unfortunately it will not animate like that.)<\/p>\n
Well, because no css has been going on until now the view would be pretty creepy:
\n
\"Accordion<\/a>
Accordion Menu HTML Setup<\/figcaption><\/figure><\/p>\n
Let\u2019s have a look at the style.<\/p>\n
2.2 Setting up the CSS<\/h3>\n
Let\u2019s define a width for the accordion and center it:<\/p>\n
\r\n.ac-container{\r\n\twidth: 400px;\t\/* width of the container *\/\r\n\tmargin: 10px auto 30px auto;\r\n\ttext-align: left;\r\n}\r\n<\/pre>\n
Next, we\u2019ll make the labels appear as clickable buttons by giving them some slick background gradient. With multiple box <\/p>\n
shadows, we\u2019ll create a subtle border and an inset effect.<\/p>\n
\r\n.ac-container label{\r\n\tpadding: 5px 20px;\r\n\tposition: relative;\r\n\tdisplay: block;\r\n\tcolor: #777;\r\n\tline-height: 33px;\r\n\tfont-size: 19px;\r\n\tbackground: #ffffff;\r\n\t\/* gradient applied on tabs of the accordion menu *\/\r\n\tbackground: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);\r\n\tbackground: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));\r\n\tbackground: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);\r\n\tbackground: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);\r\n\tbackground: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);\r\n\tbackground: linear-gradient(top, #ffffff 1%,#eaeaea 100%);\r\n\tbox-shadow: \r\n\t\t0px 0px 0px 1px rgba(155,155,155,0.3), \r\n\t\t1px 0px 0px 0px rgba(255,255,255,0.9) inset, \r\n\t\t0px 2px 2px rgba(0,0,0,0.1);\r\n}\r\n.ac-container label:hover{\r\n\tbackground: #fff;\t\/* hover on tabs, white color *\/\r\n}\r\n<\/pre>\n
When we click on a label, the checkbox get\u2019s checked and when that happens we want the respective label to have the <\/p>\n
following \u201cselected\u201d style, it is what we call the expanded tab styling:<\/p>\n
\r\n\/* styling of the expanded tab text *\/\r\n.ac-container input:checked + label,\r\n.ac-container input:checked + label:hover{\r\n\tbackground: #c6e1ec;\r\n\tcolor: #3d7489;\r\n\ttext-shadow: 0px 1px 1px rgba(255,255,255, 0.6);\r\n\tbox-shadow: \r\n\t\t0px 0px 0px 1px rgba(155,155,155,0.3), \r\n\t\t0px 2px 2px rgba(0,0,0,0.1);\r\n}\r\n<\/pre>\n
As you can see, we are using the adjacent sibling combinator to select the label since it is directly preceded by the checkbox <\/p>\n
input. Let\u2019s add a little arrow icon on hover. For that we\u2019ll simply use the pseudo-class \u201cafter\u201d so that we don\u2019t add <\/p>\n
unecessary markup in our document:<\/p>\n
\r\n.ac-container label:hover:after,\r\n.ac-container input:checked + label:hover:after{\r\n\tcontent: '';\r\n\tposition: absolute;\r\n\twidth: 24px;\r\n\theight: 24px;\r\n\tright: 13px;\r\n\ttop: 7px;\r\n\tbackground: transparent url(arrow_down.png) no-repeat center center;\t\r\n}\r\n<\/pre>\n
For the \u201cselected\u201d item, we want to show the up-pointing arrow:<\/p>\n
\r\n.ac-container input:checked + label:hover:after{\r\n\tbackground-image: url(arrow_up.png);\r\n}\r\n<\/pre>\n
And since we don\u2019t want the inputs to show, we\u2019ll hide them:<\/p>\n
\r\n.ac-container input{\r\n\tdisplay: none;\t\/* there is no real input *\/\r\n}\r\n<\/pre>\n
The content area will have an initial height of 0px and any overflow will be hidden. We\u2019ll add a transition for the height and for the box shadow. The transition that we are adding here will act upon \u201cclosing\u201d the item. We define another transition for the selected item. So, we can basically control the two behaviors by doing this. As you can see, we will make the closing <\/p>\n
a bit faster than the opening.<\/p>\n
\r\n.ac-container article{\r\n\tbackground: rgba(255, 255, 255, 0.5);\t\/* text bg color *\/\r\n\tmargin-top: 0px;\t\/* no top margin, just padding *\/\r\n\toverflow: hidden;\t\/* do not overlay text *\/\r\n\theight: 0px;\t\t\/* initial height *\/\r\n\tposition: relative;\r\n\t-webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;\r\n\t-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;\r\n\t-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;\r\n\t-ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;\r\n\ttransition: height 0.3s ease-in-out, box-shadow 0.6s linear;\r\n}\r\n.ac-container input:checked ~ article{\r\n\ttransition: \r\n\t\theight 0.5s ease-in-out, \r\n\t\tbox-shadow 0.1s linear;\r\n\t     box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);\r\n}\r\n<\/pre>\n
Let\u2019s style the content a bit:<\/p>\n
\r\n.ac-container article p{\t\/* just styling the paragraphs *\/\r\n\tfont-style: italic;\r\n\tcolor: #777;\r\n\tmargin: 0;\t\t\/* no margin, we have used padding *\/\r\n\tline-height: 23px;\r\n\tfont-size: 14px;\r\n\tpadding: 15px;\r\n\ttext-shadow: 1px 1px 1px rgba(255,255,255,0.8);\r\n}\r\n<\/pre>\n
Now we define the three classes for the different heights. These are the heights that an item\u2019s content will animate to:<\/p>\n
\r\n.ac-container input:checked ~ article.ac-small{\r\n\theight: 140px;\r\n}\r\n.ac-container input:checked ~ article.ac-medium{\r\n\theight: 180px;\r\n}\r\n.ac-container input:checked ~ article.ac-large{\r\n\theight: 230px;\r\n}\r\n<\/pre>\n
As already mentioned, \u201cauto\u201d height would of course be the best option here, but since we can\u2019t animate to that, we need to set some heights for the transition. Now the final result of the accordion menu in the browser would be:<\/p>\n
\"Final<\/a>
Final Result of the Accordion Menu<\/figcaption><\/figure>
\nNote that up and down arrows appear only on hovers, that is why you don’t see them in the third image.<\/p>\n
3. Conclusion<\/h2>\n
To conclude, we can say that the accordion menu is a very good way to organize your content better inside the webpage, making it easier to include more information into expandable tabs that smoothly go under the tab name. Considering the coding aspect, CSS is the best way to make this element available for users, as other ways like javascript would probably be slower or unavailable if some user has javascript turned off in his\/her browser. Feel free to play around with css.<\/p>\n
6. Download<\/h2>\n
Download<\/strong>
\nYou can download the full source code of this example here: CSS Accordion Menu<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
The aim of this example is to explain how to create a CSS accordion menu. Accordion menus are menus whose content can be expanded in width or height, usually with a smooth wipe effect, to show more of something. Until now, this has been achieved using mostly javascript (jQuery), but as you may have realised …<\/p>\n","protected":false},"author":75,"featured_media":917,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-5542","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"yoast_head":"\nCSS Accordion Menu Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"The aim of this example is to explain how to create a CSS accordion menu. Accordion menus are menus whose content can be expanded in width or height,\" \/>\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\/css\/css-accordion-menu-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Accordion Menu Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"The aim of this example is to explain how to create a CSS accordion menu. Accordion menus are menus whose content can be expanded in width or height,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/css\/css-accordion-menu-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-07-13T09:15:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-08T12:19:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-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=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-accordion-menu-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-accordion-menu-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"CSS Accordion Menu Example\",\"datePublished\":\"2015-07-13T09:15:44+00:00\",\"dateModified\":\"2018-01-08T12:19:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-accordion-menu-example\/\"},\"wordCount\":780,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-accordion-menu-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-accordion-menu-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-accordion-menu-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/css\/css-accordion-menu-example\/\",\"name\":\"CSS Accordion Menu Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-accordion-menu-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-accordion-menu-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"datePublished\":\"2015-07-13T09:15:44+00:00\",\"dateModified\":\"2018-01-08T12:19:50+00:00\",\"description\":\"The aim of this example is to explain how to create a CSS accordion menu. Accordion menus are menus whose content can be expanded in width or height,\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-accordion-menu-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-accordion-menu-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-accordion-menu-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-accordion-menu-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Accordion Menu 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":"CSS Accordion Menu Example - Web Code Geeks - 2026","description":"The aim of this example is to explain how to create a CSS accordion menu. Accordion menus are menus whose content can be expanded in width or height,","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\/css\/css-accordion-menu-example\/","og_locale":"en_US","og_type":"article","og_title":"CSS Accordion Menu Example - Web Code Geeks - 2026","og_description":"The aim of this example is to explain how to create a CSS accordion menu. Accordion menus are menus whose content can be expanded in width or height,","og_url":"https:\/\/www.webcodegeeks.com\/css\/css-accordion-menu-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-07-13T09:15:44+00:00","article_modified_time":"2018-01-08T12:19:50+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-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":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/css\/css-accordion-menu-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-accordion-menu-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"CSS Accordion Menu Example","datePublished":"2015-07-13T09:15:44+00:00","dateModified":"2018-01-08T12:19:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-accordion-menu-example\/"},"wordCount":780,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-accordion-menu-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/css\/css-accordion-menu-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/css\/css-accordion-menu-example\/","url":"https:\/\/www.webcodegeeks.com\/css\/css-accordion-menu-example\/","name":"CSS Accordion Menu Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-accordion-menu-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-accordion-menu-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","datePublished":"2015-07-13T09:15:44+00:00","dateModified":"2018-01-08T12:19:50+00:00","description":"The aim of this example is to explain how to create a CSS accordion menu. Accordion menus are menus whose content can be expanded in width or height,","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-accordion-menu-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/css\/css-accordion-menu-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/css\/css-accordion-menu-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/css\/css-accordion-menu-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/www.webcodegeeks.com\/category\/css\/"},{"@type":"ListItem","position":3,"name":"CSS Accordion Menu 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\/5542","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=5542"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/5542\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/917"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=5542"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=5542"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=5542"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}