Animated Collapse / Expend Components Made with Pure CSS

If you want to add accordion to your blogger blog or website you need to have HTML and JavaScript code for that and CSS is also necessary but this time I am going to provide you the source code by which you will not need a single word of JavaScript You will only need CSS and HTML.


In HTML you have two tags summary and details this time we are going to use these two tags to make expandable and collapsible animated components similar to accordions.

You can see the description of tags or elements used on google.

Precaution:

These components will not work in all browsers it is only supported in latest browsers.

Demo/Preview of Animated Collapse Expend Component:

This is the snapped preview of Animated Collapse Expend Component.

What's happening buddy today we are going to create Animated Collapse Expend Component

As you know the HTML markup is compulsory for that so we should have some HTML markup first. Below is the HTML markup.

The HTML, CSS & Javascript code that are provided below can have some encoding errors so i recommend you to used codes from project files in case if there is any error with the working of code.

HTML markup for Animated Collapse Expend Component :

<div class="container"><details class="success"><summary>Click to open</summary><p>If your browser supports this element, it should allow you to expand and collapse these details.</p></details></div> 

Attribute	Belongs to	Description
charset	<meta>, <script>	Specifies the character encoding
class	Global Attributes	Specifies one or more classnames for an element (refers to a class in a style sheet)
href	<a>, <area>, <base>, <link>	Specifies the URL of the page the link goes to
lang	Global Attributes	Specifies the language of the element's content
rel	<a>, <area>, <link>	Specifies the relationship between the current document and the linked document

Here is the HTML code I have only created one expandable collapsible element but in the project files you will find 3 expandable collapsible animated components with different classes.

Three classes are there that can be used:
default, Primaryand success.

Without CSS our this script (Animated Collapse Expend Component) will never look appealing. So here we are, our HTML markup is ready now we have to customize our HTML and it can only be done using CSS.

So this is the CSS code which i have written and we will use this to customize Animated Collapse Expend Component you can copy it by clicking on the code and code will be automatically copied to clipboard.

CSS Code for Animated Collapse Expend Component :

.container{width:450px;height:376px;font-family:"Open Sans", sans-serif}details{border-color:#878d99;color:rgba(255, 255, 255, 0.9);background:#878d99;border:1px solid;cursor:pointer;transition:background 0.3s;border-radius:4px;min-height:48px;max-height:60px;-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(0.1deg);transform:rotate(0.1deg);transition:all 0.3s}details:hover{border-color:#878d99;color:rgba(255, 255, 255, 0.6)}details:active{color:rgba(255, 255, 255, 0.9);border-color:#6d7380}details::-webkit-details-marker{display:none}details + details{margin-top:10px}details p{color:#fefefe;line-height:1.7;margin:10px 0 0;padding:0 20px 15px}details.primary{border-color:#409eff;color:rgba(255, 255, 255, 0.9);background:#409eff}details.primary:hover{border-color:#409eff;color:rgba(255, 255, 255, 0.6)}details.primary:active{color:rgba(255, 255, 255, 0.9);border-color:#0d84ff}details.success{border-color:#67c23a;color:rgba(255, 255, 255, 0.9);background:#67c23a}details.success:hover{border-color:#67c23a;color:rgba(255, 255, 255, 0.6)}details.success:active{color:rgba(255, 255, 255, 0.9);border-color:#529b2e}details.square{border-radius:0}details[open]{transition:all 0.6s;min-height:100px;max-height:200px}summary{outline:none;font-size:16px;padding:13px}summary:selection{background:transparent}summary:after{margin-top:2px;content:"➕";float:left;margin-right:11px;text-align:center;font-size:11px}[open] summary:after{padding:0 0 12px 0;content:"➖"}

Here in the CSS code I have added some classes you can see the demo this is not a realtime demo but this is a snapped demo or preview of these expandable and collapsible components.

These classes are usually used to change the color scheme of these components.

Three classes are there that can be used:
default, Primaryand success.

You can play around with all these settings choose what you like.

These are some css selectors that are used in the above css code with their description and example.

Selector	Example	Example description
:active	a:active	Selects the active link
:hover	a:hover	Selects links on mouse over

source:softwebtuts.com