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. Below we have our basic section of accordion tab where we are going to copy paste few times.
<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>
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.
Also 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.
<input type="radio" name="slideDown" id="a1" checked>
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.
Thank you for watching...
Top comments (0)