{"id":11021,"date":"2012-01-20T21:01:15","date_gmt":"2012-01-20T13:01:15","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=11021"},"modified":"2025-04-04T00:44:55","modified_gmt":"2025-04-03T16:44:55","slug":"create-css-based-content","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/create-css-based-content\/","title":{"rendered":"How to Create CSS-Based Content Accordion"},"content":{"rendered":"<p>In today\u2019s tutorial we are going to learn how we can create a <strong>horizontal and vertical content accordion by just using CSS3<\/strong>. There are many jQuery plugins out that can do this job for you but what do you do if the visitor has Javascript turned off, then the accordion won\u2019t work correctly. If your accordion is purely in CSS then it will work for all your visitors.<\/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\/css-only-accordion\/\" class=\"ref-block__link\" title=\"Read More: 4 Ways to Create Beautiful CSS-Only Accordions\" rel=\"bookmark\"><span class=\"screen-reader-text\">4 Ways to Create Beautiful CSS-Only Accordions<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css-only-accordion.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-24965 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css-only-accordion.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">4 Ways to Create Beautiful CSS-Only Accordions<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tGuides on how to create CSS-only accordions using radio button, checkbox, :target and :hover method.\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<p>We are going to create a <em>horizontal<\/em> and <em>vertical<\/em> content accordion. On clicking the headline text the slide will open displaying the full content, and here\u2019s a quick preview (screenshots) how they look like.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-based-accordion\/css-based-accordion.jpg\" width=\"500\" height=\"461\" alt=\"horizontal\/vertical accordion\"><\/figure>\n<p>Let the coding begin!<\/p>\n<h2>1. Preparing HTML and Content<\/h2>\n<p>To start with we are going to create the HTML for the accordion.<\/p>\n<p>The structure needs a container <code>div<\/code> and then have a <code>section<\/code> for each slide in the accordion. In this example we are going to have 5 slides. Each of the slides are going to have a title and a paragraph for the content.<\/p>\n<pre>&lt;div class=\"accordion horizontal\"&gt;\r\n\t &lt;section&gt;\r\n\t &lt;h2&gt;About Us&lt;\/h2&gt;\r\n\t &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.&lt;\/p&gt;\r\n\t &lt;\/section&gt;\r\n\r\n\t &lt;section&gt;\r\n\t &lt;h2&gt;Services&lt;\/h2&gt;\r\n\t &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.&lt;\/p&gt;\r\n\t &lt;\/section&gt;\r\n\r\n\t &lt;section&gt;\r\n\t &lt;h2&gt;Blog&lt;\/h2&gt;\r\n\t &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.&lt;\/p&gt;\r\n\t &lt;\/section&gt;\r\n\r\n\t &lt;section&gt;\r\n\t &lt;h2&gt;Portfolio&lt;\/h2&gt;\r\n\t &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.&lt;\/p&gt;\r\n\t &lt;\/section&gt;\r\n\r\n\t &lt;section&gt;\r\n\t &lt;h2&gt;Contact&lt;\/h2&gt;\r\n\t &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.&lt;\/p&gt;\r\n\t &lt;\/section&gt;\r\n\t &lt;\/div&gt;\r\n <\/pre>\n<p>Now we have our slides we can begin to style the accordion.<\/p>\n<h2>2. CSS Styling<\/h2>\n<p>First we need to style the containing <code>div<\/code> of the accordion. This will give us an idea of how to display each of the slides and each of the headlines.<\/p>\n<pre>\r\n \/*Define Accordion box*\/\r\n .accordion { \r\n\t width:830px;\r\n\t overflow:hidden; \r\n\t margin:10px auto; \r\n\t color:#474747; \r\n\t background:#414141; \r\n\t padding:10px; \r\n }\r\n <\/pre>\n<p>Next we are going to create the headlines for each of the slides.<\/p>\n<pre>\r\n .accordion section{ \r\n\t float:left;\r\n\t overflow:hidden; \r\n\t color:#333; \r\n\t cursor:pointer; \r\n\t background: #333; \r\n\t margin:3px; \r\n }\r\n .accordion section:hover {\r\n background:#444;\r\n }<\/pre>\n<p>We are setting the background color to be dark grey on the section to be the headline where the visitors will click to display the slide. We are using this section for both the headline and the content which means we are able to use less HTML and reuse the title of the slide as the headline of the content.<\/p>\n<pre>\r\n .accordion section p { \r\n\t display:none; \r\n }<\/pre>\n<p>At the moment all the slides will be closed so we need to make sure that the paragraph is hidden from view until the slide is open, so for now set the display of the paragraph to none.<\/p>\n<pre>\r\n .accordion section:after{\r\n\t position:relative;\r\n\t font-size:24px;\r\n\t color:#000;\r\n\t font-weight:bold;\r\n }\r\n .accordion section:nth-child(1):after{ content:'1'; }\r\n .accordion section:nth-child(2):after{ content:'2'; }\r\n .accordion section:nth-child(3):after{ content:'3'; }\r\n .accordion section:nth-child(4):after{ content:'4'; }\r\n .accordion section:nth-child(5):after{ content:'5'; }\r\n <\/pre>\n<p>With the slides closed we want to display a number at the bottom of the headline to say which number slide we are on. For this we are going to use CSS to add content after the section headline, this can be done by using the <code>:after<\/code> pseudo-class selector.<\/p>\n<p>Now we have created the headline for the slide we can make the click event to display the slide in the accordion. But there is a problem, CSS doesn\u2019t have a click event, which is why the accordion is normally created by using jQuery so we can attach a click event to the headline text.<\/p>\n<p>We need to mimic the click event in CSS which can be done by using the <code>:target<\/code> pseudo-class selector.<\/p>\n<h2>3. Using <code>:target<\/code> pseudo-class Selector<\/h2>\n<p><code>:target<\/code> allows us to style the fragment identifier. Sometimes we use an on-page anchor tag to point to a place on the page. On clicking the link the <code>id<\/code> in the anchor tag becomes the target and you can style this by using the <code>:target<\/code> selector.<\/p>\n<p>To add this into the accordion we need to add a link around the headline pointing to an <code>id<\/code> of the slide.<\/p>\n<pre>\r\n &lt;section id=\"about\"&gt;\r\n &lt;h2&gt;&lt;a href=\"#about\"&gt;About Us&lt;\/a&gt;&lt;\/h2&gt;\r\n &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.&lt;\/p&gt;\r\n &lt;\/section&gt;\r\n <\/pre>\n<pre>\r\n .accordion section:target { \r\n\t background:#FFF; \r\n\t padding:10px;\r\n }\r\n .accordion section:target:hover { \r\n\t background:#FFF; \r\n }\r\n .accordion section:target h2 {\r\n\t width:100%;\r\n }\r\n .accordion section:target h2 a{ \r\n\t color:#333; \r\n\t padding:0;\r\n }\r\n .accordion section:target p {\r\n\t display:block;\r\n }\r\n .accordion section h2 a{\r\n\t padding:8px 10px;\r\n\t display:block; \r\n\t font-size:16px; \r\n\t font-weight:normal;\r\n\t color:#eee; \r\n\t text-decoration:none; \r\n }<\/pre>\n<p>The above code will change the size of the slide to fit the rest of the accordion and changes the background color to white. The paragraph was hidden so now on target we need to display the paragraph.<\/p>\n<p>Now when you click on the headline of the accordion the slide will change style to display the content of the slide.<\/p>\n<h2>4. Horizontal Accordion<\/h2>\n<p>The above code will create the general accordion now we can start to make the CSS changes for the differences between the horizontal and vertical accordion. Both these accordions have the same functionality but the headline styling would be different.<\/p>\n<pre>\r\n .horizontal section{ \r\n\t width:5%; \r\n\t height:250px; \r\n\t -moz-transition: width 0.2s ease-out; \r\n\t -webkit-transition:width 0.2s ease-out;\r\n\t -o-transition:width 0.2s ease-out;\r\n\t transition:width 0.2s ease-out;\r\n }<\/pre>\n<p>First we set the <code>width<\/code> of the headline section to 5% so it is a closed slide. As the section is both the headline and the content for the slide we need to add the animation to display the content by using the transition property.<\/p>\n<pre>\r\n \/*Position the number of the slide*\/\r\n\t .horizontal section:after{\r\n\t top:140px;\r\n\t left:15px;\r\n }<\/pre>\n<p>The position of the number on the slide will be the same position on each closed headline these are positioned differently to the vertical headlines.<\/p>\n<pre>\r\n \/*Header of closed slide*\/\r\n\t .horizontal section h2 { \r\n\t -webkit-transform:rotate(90deg);\r\n\t -moz-transform:rotate(90deg);\r\n\t -o-transform: rotate(90deg);\r\n\t transform: rotate(90deg);\r\n\t width:240px; \r\n\t position:relative; \r\n\t left:-100px; \r\n\t top:85px;\r\n } \r\n \/*On mouse over open slide*\/\r\n .horizontal :target{ \r\n\t width:73%;\r\n\t height:230px; \r\n }\r\n .horizontal :target h2{ \r\n\t top:0px;\r\n\t left:0;\r\n\t -webkit-transform:rotate(0deg);\r\n\t -moz-transform:rotate(0deg);\r\n\t -o-transform: rotate(0deg);\r\n\t transform: rotate(0deg); \r\n }<\/pre>\n<p>The above code will change the size of the slide to fit the rest of the accordion. The headline was rotated vertically to run down the headline but now with the slide open we need to change the text back to be horizontal by rotating the text back to 0 degrees.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-based-accordion\/accordion-horizontal.jpg\" width=\"500\" height=\"172\" alt=\"horizontal accordion\"><\/figure>\n<h2>5. Vertical Accordion<\/h2>\n<p>The vertical accordion works the same way as the horizontal accordion except we need to change the <code>height<\/code> instead of the <code>width<\/code> and we don\u2019t need to change the alignment of the text.<\/p>\n<pre>\r\n .vertical section{ \r\n\t width:100%; \r\n\t height:40px; \r\n\t -webkit-transition:height 0.2s ease-out;\r\n\t -moz-transition:height 0.2s ease-out;\r\n\t -o-transition:height 0.2s ease-out;\r\n\t transition:height 0.2s ease-out;\r\n }\r\n \r\n \/*Set height of the slide*\/\r\n .vertical :target{ \r\n\t height:250px; \r\n\t width:97%;\r\n }<\/pre>\n<p>On the <code>target<\/code> event of the vertical accordion we are going to change the <code>height<\/code> of the headline to display the slide.<\/p>\n<pre>\r\n .vertical section h2 { \r\n\t position:relative; \r\n\t left:0; \r\n\t top:-15px; \r\n }\r\n \/*Set position of the number on the slide*\/\r\n .vertical section:after{ \r\n\t top:-60px;\r\n\t left:810px;\r\n }\r\n .vertical section:target:after{ \r\n\t left:-9999px;\r\n }<\/pre>\n<p>The above will change the <code>position<\/code> of the headline text on the closed slide. With the closed slide we need to set the <code>position<\/code> of the number which is located on the right of the accordion. When the slide is open we need to hide this number on headline when the target is set so we change the left position off the screen.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-based-accordion\/accordion-vertical.jpg\" alt=\"vertical accordion\" width=\"500\" height=\"284\"><\/figure>\n<p>Now when you click on the headline of the accordion the slide will change style to display the content of the slide.<\/p>","protected":false},"excerpt":{"rendered":"<p>In today\u2019s tutorial we are going to learn how we can create a horizontal and vertical content accordion by just using CSS3. There are many jQuery plugins out that can do this job for you but what do you do if the visitor has Javascript turned off, then the accordion won\u2019t work correctly. If your&hellip;<\/p>\n","protected":false},"author":457,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[3655,507,506,2016],"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.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Create CSS-Based Content Accordion - Hongkiat<\/title>\n<meta name=\"description\" content=\"In today&#039;s tutorial we are going to learn how we can create a horizontal and vertical content accordion by just using CSS3. There are many jQuery plugins\" \/>\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\/create-css-based-content\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create CSS-Based Content Accordion\" \/>\n<meta property=\"og:description\" content=\"In today&#039;s tutorial we are going to learn how we can create a horizontal and vertical content accordion by just using CSS3. There are many jQuery plugins\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/create-css-based-content\/\" \/>\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=\"2012-01-20T13:01:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T16:44:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css-based-accordion\/css-based-accordion.jpg\" \/>\n<meta name=\"author\" content=\"Paul Underwood\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Paul Underwood\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-css-based-content\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-css-based-content\\\/\"},\"author\":{\"name\":\"Paul Underwood\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/8e9124ae60654ad11cb1daca8b9f2fb5\"},\"headline\":\"How to Create CSS-Based Content Accordion\",\"datePublished\":\"2012-01-20T13:01:15+00:00\",\"dateModified\":\"2025-04-03T16:44:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-css-based-content\\\/\"},\"wordCount\":872,\"commentCount\":39,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-css-based-content\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-based-accordion\\\/css-based-accordion.jpg\",\"keywords\":[\"Content Accordion\",\"CSS\",\"HTML\",\"HTML5 \\\/ CSS3 Tutorials\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-css-based-content\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-css-based-content\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-css-based-content\\\/\",\"name\":\"How to Create CSS-Based Content Accordion - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-css-based-content\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-css-based-content\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-based-accordion\\\/css-based-accordion.jpg\",\"datePublished\":\"2012-01-20T13:01:15+00:00\",\"dateModified\":\"2025-04-03T16:44:55+00:00\",\"description\":\"In today's tutorial we are going to learn how we can create a horizontal and vertical content accordion by just using CSS3. There are many jQuery plugins\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-css-based-content\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-css-based-content\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-css-based-content\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-based-accordion\\\/css-based-accordion.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-based-accordion\\\/css-based-accordion.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-css-based-content\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create CSS-Based Content Accordion\"}]},{\"@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\\\/8e9124ae60654ad11cb1daca8b9f2fb5\",\"name\":\"Paul Underwood\",\"description\":\"Paul is a PHP Web Developer from Bristol, UK. He writes tutorials about Web Development: main subjects include PHP, jQuery, CSS3, and HTML5. He also records useful code snippets at Paulund.co.uk.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/paulunderwood\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create CSS-Based Content Accordion - Hongkiat","description":"In today's tutorial we are going to learn how we can create a horizontal and vertical content accordion by just using CSS3. There are many jQuery plugins","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\/create-css-based-content\/","og_locale":"en_US","og_type":"article","og_title":"How to Create CSS-Based Content Accordion","og_description":"In today's tutorial we are going to learn how we can create a horizontal and vertical content accordion by just using CSS3. There are many jQuery plugins","og_url":"https:\/\/www.hongkiat.com\/blog\/create-css-based-content\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-01-20T13:01:15+00:00","article_modified_time":"2025-04-03T16:44:55+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css-based-accordion\/css-based-accordion.jpg","type":"","width":"","height":""}],"author":"Paul Underwood","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Paul Underwood","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/create-css-based-content\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-css-based-content\/"},"author":{"name":"Paul Underwood","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/8e9124ae60654ad11cb1daca8b9f2fb5"},"headline":"How to Create CSS-Based Content Accordion","datePublished":"2012-01-20T13:01:15+00:00","dateModified":"2025-04-03T16:44:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-css-based-content\/"},"wordCount":872,"commentCount":39,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-css-based-content\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-based-accordion\/css-based-accordion.jpg","keywords":["Content Accordion","CSS","HTML","HTML5 \/ CSS3 Tutorials"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/create-css-based-content\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/create-css-based-content\/","url":"https:\/\/www.hongkiat.com\/blog\/create-css-based-content\/","name":"How to Create CSS-Based Content Accordion - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-css-based-content\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-css-based-content\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-based-accordion\/css-based-accordion.jpg","datePublished":"2012-01-20T13:01:15+00:00","dateModified":"2025-04-03T16:44:55+00:00","description":"In today's tutorial we are going to learn how we can create a horizontal and vertical content accordion by just using CSS3. There are many jQuery plugins","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-css-based-content\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/create-css-based-content\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/create-css-based-content\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css-based-accordion\/css-based-accordion.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-based-accordion\/css-based-accordion.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/create-css-based-content\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create CSS-Based Content Accordion"}]},{"@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\/8e9124ae60654ad11cb1daca8b9f2fb5","name":"Paul Underwood","description":"Paul is a PHP Web Developer from Bristol, UK. He writes tutorials about Web Development: main subjects include PHP, jQuery, CSS3, and HTML5. He also records useful code snippets at Paulund.co.uk.","url":"https:\/\/www.hongkiat.com\/blog\/author\/paulunderwood\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-2RL","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/11021","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\/457"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=11021"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/11021\/revisions"}],"predecessor-version":[{"id":73513,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/11021\/revisions\/73513"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=11021"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=11021"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=11021"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=11021"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}