This content originally appeared on DEV Community and was authored by Prahalad S
Accordion height/max-height animation in Pure CSS supports in all browsers
Let's create each section for accordion in html using grid. This supports in all browsers.
Lets copy the above structure four times inside parent div with class name ".tab".
Rename the headings(h3) as : First Tab, Second Tab, Third Tab, Fourth Tab as shown in below code.
Assign 'name' attribute as 'slideDown' in <input> element. This is important else the accordion will not work. You can rename anything. But the attribute must not be empty. Also assign id's to all the four tabs in input elements - (#a1, #a2, #a3, #a4).
<div class="tab">
<h3>First Tab</h3>
<input type="radio" name="slideDown" id="a1">
<div class="content">
<div class="hide">
<i class="bi bi-chevron-up"></i>
<p>When you are shopping on Govindjis.com you are guaranteed the same great customer service as you would expect in store. You may contact us through our website under contact us or by calling us at @Site_Strings.StorePhone.</p>
</div>
</div>
<h3>Second Tab</h3>
<input type="radio" name="slideDown" id="a2">
<div class="content">
<div class="hide">
<i class="bi bi-chevron-up"></i>
<p>When you are shopping on Govindjis.com you are guaranteed the same great customer service as you would expect in store. You may contact us through our website under contact us or by calling us at @Site_Strings.StorePhone. When you are shopping on Govindjis.com you are guaranteed the same great customer service as you would expect in store. You may contact us through our website under contact us or by calling us at @Site_Strings.StorePhone. </p>
</div>
</div>
<h3>Third Tab</h3>
<input type="radio" name="slideDown" id="a3">
<div class="content">
<div class="hide">
<i class="bi bi-chevron-up"></i>
<p>When you are shopping on Govindjis.com you are guaranteed the same great customer service as you would expect in store. You may contact us through our website under contact us or by calling us at @Site_Strings.StorePhone.</p>
</div>
</div>
<h3>Fourth Tab</h3>
<input type="radio" name="slideDown" id="a4">
<div class="content">
<div class="hide">
<i class="bi bi-chevron-up"></i>
<p>When you are shopping on Govindjis.com you are guaranteed the same great customer service as you would expect in store. You may contact us through our website under contact us or by calling us at @Site_Strings.StorePhone.</p>
</div>
</div>
</div>
Lets create CSS.
Importing CSS from library only for using icons.
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css");
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
scroll-behavior: smooth;
}
body {
background: rgb(93, 93, 93);
font-family: monospace;
display: flex;
flex-direction: column;
}
.tab {
width: clamp(20rem, 60vw, 70rem);
margin: 50px auto;
position: relative;
}
.tab h3 {
font-size: 22px;
font-weight: bold;
line-height: 36px;
padding: 5px 5px 5px 10px;
background: #ffdccc;
border-radius: 5px;
color: black;
position: absolute;
width: calc(100% - 15px);
}
Lets hide the **<input>** by reducing the opacity to 0.
.tab input[type="radio"] {
height: 46px;
width: 100%;
opacity: 0;
cursor: pointer;
}
styling the content section
.tab .content {
margin: 2px 0;
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 500ms;
position: relative;
}
.tab .content > .hide i { // Arrow icon from library
position: absolute;
font-size: 20px;
top: -38px;
right: 25px;
transition: 0.2s ease;
transform: rotate(0deg);
}
.tab .content > .hide p {
font-size: 16px;
line-height: 25px;
padding: 5px 10px;
margin: 2px 0 5px;
background: #fbb1a6;
border-radius: 5px;
}
Hiding the content section. This will open when the tab is clicked.
.tab .content > .hide { // Hiding the <p> paragraph section
overflow: hidden;
}
Click event
.tab input:checked + .content { // onclick opening the hidden tabs
grid-template-rows: 1fr;
}
.tab input:checked + .content > .hide i { // Arrow animation rotation
transform: rotate(180deg);
}
Lets add :checked to first tab.
The paragraph text in second tab is copied twice to increase the height to show the height/max-height animation.
Now, by default the First tab will be opened in browser because we assigned checked. And you can see the arrow turned downwards.
Here is the final example.
watch demo and get complete code here
Thank you for watching...
This content originally appeared on DEV Community and was authored by Prahalad S
Prahalad S | Sciencx (2024-09-28T18:40:19+00:00) Accordion height/max-height animation in Pure CSS. Retrieved from https://www.scien.cx/2024/09/28/accordion-height-max-height-animation-in-pure-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.