Scribd
Upload
94 views3 pages

.Accordion:after: Content Font-Size Color Float Margin-Left

This document describes how to create an accordion component with HTML, CSS, and JavaScript. The accordion allows users to expand and collapse different sections of content. When a section header is clicked, it toggles the "active" class which changes the icon from plus to minus. It also toggles the display style of the corresponding section content from "block" to "none" to show/hide it. An alternative method is provided that uses max-height instead of display to smoothly animate the expansion and collapse of sections.

Uploaded by

Angela Beatrice
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
94 views3 pages

.Accordion:after: Content Font-Size Color Float Margin-Left

This document describes how to create an accordion component with HTML, CSS, and JavaScript. The accordion allows users to expand and collapse different sections of content. When a section header is clicked, it toggles the "active" class which changes the icon from plus to minus. It also toggles the display style of the corresponding section content from "block" to "none" to show/hide it. An alternative method is provided that uses max-height instead of display to smoothly animate the expansion and collapse of sections.

Uploaded by

Angela Beatrice
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Accordion

.accordion:after {
content: '\02795'; /* Unicode character for "plus" sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}

.active:after {
content: "\2796"; /* Unicode character for "minus" sign (-) */
}

<button class="accordion">Section 1</button>


<div class="panel">
<p>Lorem ipsum...</p>
</div>

<button class="accordion">Section 2</button>


<div class="panel">
<p>Lorem ipsum...</p>
</div>

<button class="accordion">Section 3</button>


<div class="panel">
<p>Lorem ipsum...</p>
</div>

.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active


class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */


.panel {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
}

var acc = document.getElementsByClassName("accordion");


var i;

for (i = 0; i < acc.length; i++) {


acc[i].addEventListener("click", function() {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("active");

/* Toggle between hiding and showing the active panel */


var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}

<style>
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {


acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>

You might also like