{"id":150,"date":"2013-05-26T05:42:47","date_gmt":"2013-05-26T05:42:47","guid":{"rendered":"http:\/\/www.cssportal.com\/blog\/?p=150"},"modified":"2024-02-28T23:44:23","modified_gmt":"2024-02-28T23:44:23","slug":"css-accordion","status":"publish","type":"post","link":"https:\/\/www.cssportal.com\/blog\/css-accordion\/","title":{"rendered":"CSS Accordion"},"content":{"rendered":"<p>One great thing about CSS is the ability to create great looking designs for your websites and with CSS3 you can write code that does not require javascript (as long as you have the latest web browsers!). In this tutorial we will show you how to design a CSS Accordion without the need of javascript, although you can still get better animations with javascript, this CSS Accordion could still make a great addition to your site design.<!--more--><br \/>\nSo what is a CSS Accordion? Quite simply a css accordion provides the web user with a container with a range of topics or headings, once the user clicks on a topic a box will display beneath the header with further information.<br \/>\n<em>Please note: This example will only work with web browsers that support CSS3.<\/em><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.cssportal.com\/blog\/wp-content\/uploads\/2013\/05\/accordion.png\" alt=\"CSS Accordion\" width=\"397\" height=\"359\" class=\"aligncenter size-full wp-image-164\" \/><\/p>\n<p>Let&#8217;s first start by writing the HTML markup for the accordion.<\/p>\n<pre class=\"language-html\"><code><xmp><div class=\"accordion\">\r\n\t<ul>\r\n\t    <li class=\"acc-header\" id=\"products\"> \r\n\t        <a href=\"#products\">Products<\/a>\r\n\t        <div class=\"acc-content\">\r\n\t\t        <p>Content goes here...<\/p>\r\n\t        <\/div>\r\n\t    <\/li>\r\n\t    <li class=\"acc-header\" id=\"services\"> \r\n\t        <a href=\"#services\">Services<\/a>\r\n\t        <div class=\"acc-content\">\r\n\t\t        <p>Content goes here...<\/p>\r\n\t        <\/div>\r\n\t    <\/li>\r\n\t    <li class=\"acc-header\" id=\"contact\"> \r\n\t        <a href=\"#contact\">Contact Us<\/a>\r\n\t        <div class=\"acc-content\">\r\n\t\t        <p>Content goes here...<\/p>\r\n\t        <\/div>\r\n\t    <\/li>\r\n\t<\/ul>\r\n<\/div>\r\n<\/xmp><\/code><\/pre>\n<p>The above markup will give us an accordion with three headings: Products, Services and Contact Us. These heading are made from links that when clicked will open the accordion content below. There are a few examples out there that use labels and radio buttons for the headings, I will add another tutorial later that will deal with those features. As always different methods have pros and cons.<\/p>\n<p>We&#8217;ll take a look at the css code now.<br \/>\nFirstly we need to style to container that the accordion will be placed in.<\/p>\n<pre class=\"language-css\"><code>.accordion {\r\n    width: 250px;\r\n    margin: 20px;\r\n    font: 12px Verdana, Geneva, sans-serif;\r\n    border: 1px solid #ccc;\r\n    border-radius: 5px;\r\n}<\/code><\/pre>\n<p><span class=\"code\">width:250px;<\/span> &#8211; Specifies the width for our accordion container.<br \/>\n<span class=\"code\">margin: 20px;<\/span> &#8211; This will give a 20px margin around the outside of the container.<br \/>\n<span class=\"code\">font: 12px Verdana, Geneva, sans-serif;<\/span> &#8211; Specifies the font size and font family.<br \/>\n<span class=\"code\">border: 1px solid #ccc;<\/span> &#8211; Will display a 1px wide solid border around our container.<br \/>\n<span class=\"code\">border-radius: 5px;<\/span> &#8211; Gives the corners a rounded look<\/p>\n<p>Next we want to style the content section for our accordion.<\/p>\n<pre class=\"language-css\"><code>.accordion .acc-content {\r\n    height: 0;\r\n    overflow: hidden;\r\n}\r\n.accordion li:target .acc-content {\r\n    height: auto;\r\n    padding: 10px;\r\n}<\/code><\/pre>\n<p><span class=\"code\">height: 0;<\/span> &#8211; Sets the initial height of our content to 0.<br \/>\n<span class=\"code\">overflow: hidden;<\/span> &#8211; Hides the information that is displayed in the content area.<br \/>\n<span class=\"code\">height: auto;<\/span> &#8211; When a user clicks on a heading, the height will then be set to auto, to display the content.<br \/>\n<span class=\"code\">padding: 10px;<\/span> &#8211; This will give a 10px padding between the container and the content displayed.<\/p>\n<p>The next step is to style the link headings, when the user clicks on the link then the content will be displayed.<\/p>\n<pre class=\"language-css\"><code>.accordion .acc-header a {\r\n    display:block;\r\n    padding:5px;\r\n    text-decoration: none;\r\n    color: #666;\r\n    text-shadow:1px 1px 1px #fff;\r\n    font-weight:bold;\r\n    border-bottom:1px solid #aaa;\r\n    background:#eee;\r\n    background:linear-gradient(#eee, #ccc);\r\n    transition:.5s;\r\n}<\/code><\/pre>\n<p><span class=\"code\">display:block;<\/span> &#8211; Makes it so we can click anywhere in the heading, by displaying the link as a block.<br \/>\n<span class=\"code\">padding:5px;<\/span> &#8211; This will provide a 5px padding around our text.<br \/>\n<span class=\"code\">text-decoration: none;<\/span> &#8211; We don&#8217;t want any line to appear below our link, so we set this to none.<br \/>\n<span class=\"code\">color: #666;<\/span> &#8211; The color for the text.<br \/>\n<span class=\"code\">text-shadow:1px 1px 1px #fff;<\/span> &#8211; Just a bit of decoration, gives our text a raised look.<br \/>\n<span class=\"code\">font-weight:bold;<\/span> &#8211; Makes the heading text bold.<br \/>\n<span class=\"code\">border-bottom:1px solid #aaa;<\/span> &#8211; Places a 1px solid border at the bottom of each heading.<br \/>\n<span class=\"code\">background:#eee;<\/span> &#8211; Sets the background of the headings.<br \/>\n<span class=\"code\">background:linear-gradient(#eee, #ccc);<\/span> &#8211; If supported this will give a gradient background to our link.<br \/>\n<span class=\"code\">transition:.5s;<\/span> &#8211; If supported this will animate the text moving when hovering over.<\/p>\n<p>We also now need to give the headings a bit of style when the user hovers their mouse over the headings.<\/p>\n<pre class=\"language-css\"><code>.accordion .acc-header a:hover {\r\n    text-decoration:none;\r\n    border-bottom:1px solid #ddd;\r\n    background:#eee;\r\n    background:linear-gradient(#eee, #ddd);\r\n    padding-left:15px;\r\n}<\/code><\/pre>\n<p><span class=\"code\">text-decoration:none;<\/span> &#8211; We don&#8217;t want a line to appear below the link, so we set this to none.<br \/>\n<span class=\"code\">border-bottom:1px solid #ddd;<\/span> &#8211; Places a 1px solid border at the bottom of each heading.<br \/>\n<span class=\"code\">background:#eee;<\/span> &#8211; When hovering over the link, this will set the background to #eee.<br \/>\n<span class=\"code\">background:linear-gradient(#eee, #ddd);<\/span> &#8211; If supported this will give a gradient background to our link.<br \/>\n<span class=\"code\">padding-left:15px;<\/span> &#8211; When hovering over the link, this will move our text 15px to the right. (With transition if supported)<\/p>\n<h3>Conclusion<\/h3>\n<p>Well that&#8217;s about all that is required to display a css accordion, in the above css code I have removed all browser specific properties, however, they have been included in the demo and the download link below.<br \/>\nAs can be seen from the code, there is no javascript used, this has been achieved using only CSS code, but because it does use CSS3 properties it will not display correctly in older browsers.<\/p>\n<p><a target=\"_blank\" class=\"btn btn-primary\" href=\"http:\/\/www.cssportal.com\/tryit\/index.php?file=blog\/accordion\" rel=\"noopener\">Demo<\/a><\/p>\n<p><a class=\"btn btn-primary\" href=\"http:\/\/www.cssportal.com\/blog\/wp-content\/uploads\/2013\/05\/accordion.zip\">Download<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>One great thing about CSS is the ability to create great looking designs for your websites and with CSS3 you can write code that does not require javascript (as long as you have the latest web browsers!). In this tutorial we will show you how to design a CSS Accordion without the need of javascript, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-150","post","type-post","status-publish","format-standard","hentry","category-css","wpautop"],"_links":{"self":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/150","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/comments?post=150"}],"version-history":[{"count":2,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/150\/revisions"}],"predecessor-version":[{"id":697,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/150\/revisions\/697"}],"wp:attachment":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/media?parent=150"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/categories?post=150"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/tags?post=150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}