{"id":1338,"date":"2016-04-16T07:47:24","date_gmt":"2016-04-16T07:47:24","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=1338"},"modified":"2023-11-07T02:50:07","modified_gmt":"2023-11-07T02:50:07","slug":"a-pure-css-based-accordion","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/a-pure-css-based-accordion\/","title":{"rendered":"A pure CSS based accordion"},"content":{"rendered":"

What is CSS accordion?<\/strong><\/h3>\n

The accordion is the way to present information that generally contains a title and its body contains the content. Normally, it fits the screen size of the users.<\/p>\n

In the jQuery section, I showed how you can use the jQuery\u2019s accordion plug-in<\/a> with examples. It uses JavaScript underway and makes the process pretty easier for creating accordions.<\/p>\n

In this tutorial, I will show you creating accordion by using pure CSS3 code. The accordion is super smooth and credit goes to the developer at GitHub website<\/a>.<\/p>\n

A demo of using jquery-like-accordion-by-css3 plug-in<\/strong><\/h3>\n

The plug-in package includes a CSS file containing all the specifications for the accordion. Either use it in your external CSS or include that package CSS file or you may use it in <style> tag.<\/p>\n

For the demo, I have used it inside the <style> tag:<\/p>\n

\"CSS<\/p>\n

See online demo and code<\/strong><\/h6>\n

The wrapper class specifies the color, width and margin etc. of the main container of accordion:<\/p>\n

.wrapper{\r\n\r\nwidth: 700px;\r\n\r\nbackground: #D1DAE0;\r\n\r\nmargin: 150px auto;\r\n\r\n}<\/pre>\n
 <\/p>\n
While single accordion specifies the properties for heading and content of the accordion:<\/p>\n
.single-accordion{\r\n\r\nheight: 35px;\r\n\r\noverflow: hidden;\r\n\r\nbackground: #4D6575;\r\n\r\nmargin-bottom: 5px;\r\n\r\npadding: 0px 10px;\r\n\r\n-webkit-transition: all 1s;\r\n\r\n}<\/pre>\n
 <\/p>\n
There are many other classes that handle different elements. See the complete CSS and markup in the demo page.<\/p>\n
Another style with border-radius and other properties<\/strong><\/h3>\n
Following is another style of the CSS accordion where I changed a few other properties like background color<\/a> and added border-radius for the main wrapper and accordion classes.<\/p>\n
The color scheme is also changed. Have a look at the demo and code:<\/p>\n
\"CSS<\/p>\n
See online demo and code<\/strong><\/h6>\n
You can see, the heading\u2019s color is also changed as the mouse is brought in the title area of any accordion.<\/p>\n
Another style of accordion with blockquote and background image<\/strong><\/h3>\n
By using this simple script, look at another style where different CSS properties are changed to the reddish theme. You may use accordion for presenting customers feedback. As an accordion is opened, it will show customer quote with background image set.<\/p>\n
In addition to changing the wrapper<\/em> class, single-accordion, single-accordion:hover<\/em>, etc. I also added a blockquote<\/em> style. See the output and code below or in the demo page:<\/p>\n
\"CSS<\/p>\n
See online demo and code<\/strong><\/h6>\n
Following is the CSS used in above demo:<\/p>\n
<style>\r\n\r\nbody {\r\n\r\nfont-family: 'Ubuntu', sans-serif;\r\n\r\nfont-size: 14px;\r\n\r\nline-height: 1;\r\n\r\n}\r\n\r\nol, ul {\r\n\r\nlist-style: none;\r\n\r\n}\r\n\r\nblockquote, q {\r\n\r\nquotes: none;\r\n\r\n}\r\n\r\nblockquote:before, blockquote:after, q:before, q:after {\r\n\r\ncontent: '';\r\n\r\ncontent: none;\r\n\r\n}\r\n\r\n.wrapper{\r\n\r\nwidth: 700px;\r\n\r\nbackground: #F8CDCE;\r\n\r\nmargin: 150px auto;\r\n\r\nborder-radius:15px;\r\n\r\n}\r\n\r\n.wrapper h1{\r\n\r\nfont-size: 40px;\r\n\r\nfont-weight: bold;\r\n\r\ncolor: #C61C20;\r\n\r\ntext-align: center;\r\n\r\npadding: 20px 0px;\r\n\r\n}\r\n\r\n.accordion{\r\n\r\nwidth: 650px;\r\n\r\npadding: 25px;\r\n\r\n\r\n\r\n}\r\n\r\n.single-accordion{\r\n\r\nheight: 35px;\r\n\r\noverflow: hidden;\r\n\r\nbackground: #941417;\r\n\r\nmargin-bottom: 5px;\r\n\r\npadding: 0px 10px;\r\n\r\nborder-radius:5px;\r\n\r\n-webkit-transition: all 1s;\r\n\r\n}\r\n\r\n.single-accordion:hover{\r\n\r\nheight: 120px;\r\n\r\nborder-radius: 10px;\r\n\r\n-webkit-transition: all 1s;\r\n\r\n}\r\n\r\n.single-accordion h2:hover{\r\n\r\ncursor: pointer;\r\n\r\nbackground-color:\u00a0 #490A0C;\r\n\r\n}\r\n\r\n.single-accordion h2{\r\n\r\ncolor: #fff;\r\n\r\nfont-size: 30px;\r\n\r\nfont-variant: small-caps;\r\n\r\nline-height: 35px;\r\n\r\n}\r\n\r\n.single-accordion p{\r\n\r\nline-height: 25px;\r\n\r\ncolor: #fff;\r\n\r\ntext-align: justify;\r\n\r\npadding: 10px;\r\n\r\n}\r\n\r\n\r\n\r\nblockquote {\r\n\r\nbackground: url(images\/bg-quote.png) no-repeat;\r\n\r\ncolor: #fff;\r\n\r\nfont-style: italic;\r\n\r\nborder-radius:10px;\r\n\r\npadding: 5px 5px 5px 50px;\r\n\r\nbackground-color:#765649;\r\n\r\n}\r\n\r\n<\/style><\/pre>\n
 <\/p>\n
This markup section:<\/p>\n
\u00a0<div class=\"wrapper\">\r\n\r\n<h1>Customer Feedback<\/h1>\r\n\r\n<div class=\"accordion\">\r\n\r\n<div class=\"single-accordion\">\r\n\r\n<h2>The Cupcakes<\/h2>\r\n\r\n<p><blockquote>\r\n\r\nDelicious cup cakes, love it. Delicious cup cakes, love it. Delicious cup cakes, love it. Delicious cup cakes, love it. Delicious cup cakes, love it. Delicious cup cakes, love it.\r\n\r\n<cite>Customer Name<\/cite>\r\n\r\n<\/blockquote><\/p>\r\n\r\n<\/div>\r\n\r\n<div class=\"single-accordion\">\r\n\r\n<h2>The accoirdion heading 2<\/h2>\r\n\r\n<p>Text for accordion goes here. Text for accordion goes here. Text for accordion goes here. Text for accordion goes here. Text for accordion goes here. Text for accordion goes here.<\/p>\r\n\r\n<\/div>\r\n\r\n<div class=\"single-accordion\">\r\n\r\n<h2>The accoirdion heading 3<\/h2>\r\n\r\n<p>Text for accordion goes here. Text for accordion goes here. Text for accordion goes here. Text for accordion goes here. Text for accordion goes here. Text for accordion goes here.<\/p>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<\/div>\r\n\r\n<\/div><\/pre>\n
 <\/p>\n
Just go ahead and modify the properties to match the theme of your website. This is really light-weight and smooth plug-in.<\/p>\n","protected":false},"excerpt":{"rendered":"
What is CSS accordion? The accordion is the way to present information that generally contains a title and its body contains the content. Normally, it fits the screen size of the users. In the jQuery section, I showed how you can use the jQuery\u2019s accordion plug-in with examples. It uses JavaScript underway and makes the … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":1341,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[12],"tags":[55],"yoast_head":"\nA pure CSS based accordion<\/title>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A pure CSS based accordion\" \/>\n<meta property=\"og:description\" content=\"What is CSS accordion? The accordion is the way to present information that generally contains a title and its body contains the content. Normally, it fits the screen size of the users. In the jQuery section, I showed how you can use the jQuery\u2019s accordion plug-in with examples. It uses JavaScript underway and makes the ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/a-pure-css-based-accordion\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-04-16T07:47:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-07T02:50:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/04\/6.3-CSS-accordion-blockquot.png\" \/>\n\t<meta property=\"og:image:width\" content=\"713\" \/>\n\t<meta property=\"og:image:height\" content=\"341\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/a-pure-css-based-accordion\/\",\"url\":\"https:\/\/www.jquery-az.com\/a-pure-css-based-accordion\/\",\"name\":\"A pure CSS based accordion\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2016-04-16T07:47:24+00:00\",\"dateModified\":\"2023-11-07T02:50:07+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/a-pure-css-based-accordion\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/a-pure-css-based-accordion\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/a-pure-css-based-accordion\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A pure CSS based accordion\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"A pure CSS based accordion","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"A pure CSS based accordion","og_description":"What is CSS accordion? The accordion is the way to present information that generally contains a title and its body contains the content. Normally, it fits the screen size of the users. In the jQuery section, I showed how you can use the jQuery\u2019s accordion plug-in with examples. It uses JavaScript underway and makes the ... Read more","og_url":"https:\/\/www.jquery-az.com\/a-pure-css-based-accordion\/","article_published_time":"2016-04-16T07:47:24+00:00","article_modified_time":"2023-11-07T02:50:07+00:00","og_image":[{"width":713,"height":341,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/04\/6.3-CSS-accordion-blockquot.png","type":"image\/png"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/a-pure-css-based-accordion\/","url":"https:\/\/www.jquery-az.com\/a-pure-css-based-accordion\/","name":"A pure CSS based accordion","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2016-04-16T07:47:24+00:00","dateModified":"2023-11-07T02:50:07+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/a-pure-css-based-accordion\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/a-pure-css-based-accordion\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/a-pure-css-based-accordion\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"A pure CSS based accordion"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/1338"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=1338"}],"version-history":[{"count":3,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/1338\/revisions"}],"predecessor-version":[{"id":9016,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/1338\/revisions\/9016"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/1341"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=1338"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=1338"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=1338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}