Animated Collapse / Expend Components Made with Pure CSS

Animated Collapse Expend Components Made with Pure CSS

Have you ever heard the word accordion? why not because you have a website and it is the main element or component of a website to show description of anything.

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.


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.
Animated Collapse Expend Components Made with Pure CSS

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> 

AttributeBelongs to Description
charset<meta>, <script>Specifies the character encoding
classGlobal AttributesSpecifies 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
langGlobal AttributesSpecifies 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.
SelectorExampleExample description
:activea:activeSelects the active link
:hovera:hoverSelects links on mouse over

Denouement :

So here we are, We have done and our project Animated Collapse Expend Component is ready now you can copy and combine all the codes provided above and combine them into single html file and have fun.

If the project files are not downloaded or if you face any error while downloading, you can simply leave your comment i will try to resolve the issue as soon as possible.

Download Project (Animated Collapse Expend Component) File :

Animated Collapse Expend
File Size 3.23 KB
Click the download button and you will be redirected to download page from where you can download project files.

If you face any difficulty in downloading the project file leave you comment below i will resolve that issue as soon as possible.

So guys this post is completed and if you want anything else right here you can also comment that topic I will try to make a post about it you can take a while for that.
Thank you !

Post a Comment

Help us improve this article by leaving your feedback below.
Previous Post Next Post