Accordion pattern in CSS is a user interface that is made up of vertically stacked collapsible and expandable items such as panels or sections. In this, only one item gets to open at a time because each of them usually has a heading part and the actual content. On the other hand, clicking on an item's header makes it reveal its content while the rest get hidden.
Typically constructed of multiple items arranged in a vertical stack, each featuring a header and a corresponding content area. The primary goal is to optimize screen real estate by displaying only one section at a time and providing a user-friendly method for expanding or collapsing specific segments as required.
To generate an accordion using CSS, you have the option to employ HTML, CSS, and occasionally JavaScript or jQuery to enhance user interaction.
What do you mean by Accordion in CSS?
The CSS Accordion menu is a visual component that comprises a list of items stacked vertically. Users can interact with this menu by clicking on it to expand or collapse the associated content. Virtually every website incorporates a CSS accordion on a page, particularly if they feature a FAQ section.
Let's take various examples of accordion in CSS.
Examples
Example 1: Here is a simple example:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Style for the accordion */
.accordion {
display: flex;
flex-direction: column;
max-width: 300px; /* Set the maximum width as needed */
}
/* Style for accordion items (panels) */
.accordion-item {
border: 1px solid #ddd;
margin-bottom: 5px;
}
/* Style for accordion item headers */
.accordion-item-header {
padding: 10px;
cursor: pointer;
background-color: #f1f1f1;
}
/* Style for accordion item content */
.accordion-item-content {
display: none;
padding: 10px;
}
/* Style to show the active (expanded) item */
.accordion-item.active .accordion-item-content {
display: block;
}
</style>
</head>
<body>
<div class="accordion">
<div class="accordion-item">
<div class="accordion-item-header">Section 1</div>
<div class="accordion-item-content">
<p>Content for Section 1 goes here.</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-header">Section 2</div>
<div class="accordion-item-content">
<p>Content for Section 2 goes here.</p>
</div>
</div>
<!-- Add more accordion items as needed -->
</div>
</body>
</html>
Each section within the accordion example consists of a header and a content area. These components are designed with specific styles, and their display is managed through CSS. The action of revealing or hiding the corresponding content areas upon clicking the headers is typically handled by JavaScript or jQuery.
Keep in mind that the instance mentioned earlier is a fundamental illustration; there exist numerous adaptations and frameworks accessible for generating accordions.
Example 2:
Example
<! DOCTYPE html>
<html>
<head>
<title> Accordion CSS Example </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
font-family: 'Flamenco', serif;
}
h1 {
color: #fff;
font-weight: normal;
font-size: 2.5rem;
text-align: center;
}
.readme {
color: #fff;
margin: 0 auto;
width: 80%;
a {
color: #00a486;
}
}
.accordion {
position: relative;
margin: 60px auto;
width: 80%;
}
[id*="open-accordion"] {
background: #698c86;
border-bottom: 1px solid #fff;
line-height: 40px;
height: 40px;
display: block;
margin: 0 auto;
position: relative;
width: 99%;
}
[id*="close-accordion"] {
display: none;
}
[id*="close-accordion"] {
background: #698c86;
border-bottom: 1px solid #fff;
line-height: 40px;
height: 40px;
display: block;
margin: 0 auto;
position: relative;
width: 99%;
}
.accordion a {
color: #fff;
font-size: 1.25em;
font-weight: normal;
padding-left: 2%;
text-decoration: none;
text-shadow: none;
}
[id*="open-accordion"]:after {
content: "";
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid rgba(255, 255, 255, 0.6);
position: absolute;
right: 5px;
top: 15px;
z-index: 999;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
.target-fix {
display: block;
top: 0;
left: 0;
position: fixed;
}
[id*="close-accordion"]:after {
content: "";
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid rgba(255, 255, 255, 0.6);
position: absolute;
right: 5px;
top: 15px;
z-index: 999;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
.accordion-content {
background: #fff;
height: 0;
margin: -1px auto 0;
padding: 0 2.5%;
position: relative;
overflow: hidden;
width: 90%;
transition: all 0.1s ease;
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
}
.accordion span:target ~ .accordion-content {
display: block;
height: auto;
padding-bottom: 25px;
padding-top: 10px;
}
.accordion span:target ~ [id*="close-accordion"] {
display: block;
}
.accordion span:target ~ [id*="open-accordion"] {
display: none;
}
.accordion span:target ~ [id*="close-accordion"]:after {
border-top: 10px solid #333;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
</style>
</head>
<body>
<h1> CSS Accordion Example </h1>
<div class="accordion">
<span class="target-fix" id="accordion"> </span>
<div>
<span class="target-fix" id="accordion1"> </span>
<a href="#accordion1" id="open-accordion1" title="open"> First Accordion Example </a>
<a href="#accordion" id="close-accordion1" title="close"> Second Accordion Example </a>
<div class="accordion-content">
<p> Accordion 1 Content </p>
</div>
</div>
<div>
<span class="target-fix" id="accordion2"> </span>
<a href="#accordion2" id="open-accordion2" title="open"> Second Accordion </a>
<a href="#accordion" id="close-accordion2" title="close"> Second Accordion </a>
<div class="accordion-content">
<p> Accordion 2 Content. </p>
</div>
</div>
<div>
<span class="target-fix" id="accordion3"> </span>
<a href="#accordion3" id="open-accordion3" title="open"> Third Accordion </a>
<a href="#accordion" id="close-accordion3" title="close"> Third Accordion </a>
<div class="accordion-content">
<p> Accordion 3 Content </p>
</div>
</div>
</div>
</body>
</html>
Explanation:
In the previous instance, we generated an accordion using CSS. Upon clicking on a specific section, the corresponding description is revealed.
Output:
Following is the output of this example.
Example 3:
Example
<! DOCTYPE html>
<html>
<head>
<title> Accordion CSS Example </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,800);
body {
padding: 20px;
font: lighter 1.2em/100% 'Open Sans';
text-align: left;
background: #eee;
}
body {
text-align: center;
}
.faq {
width: 80%;
margin: 0 auto;
}
.centerplease {
text-align:center;
margin:0 auto;
font-size: 40px;
}
.question {
color: #fff;
font-weight: normal;
position: relative;
background: #4892c7;
margin: 0 auto;
opacity: .9;
padding: 10px 10px 10px 50px;
display: block;
cursor: pointer;
text-shadow:-1px 1px 0px #4892c7, -2px 2px 0px #2a4163;
}
.answers {
border-top: 1px solid #2a4163;
background: white;
padding: 0px 15px;
margin: 0 0 7px 0;
height: 0;
overflow: hidden;
z-index: -1;
position: relative;
opacity: 0;
-webkit-transition: .7s ease;
-moz-transition: .7s ease;
-o-transition: .7s ease;
transition: .7s ease;
}
.questions:checked ~ .answers{
height: auto;
opacity: 1;
padding: 15px;
}
.plus {
position: absolute;
margin-left: 10px;
z-index: 5;
font-size: 1.8em;
line-height: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
transition: .3s ease;
}
.questions:checked ~ .plus {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.questions {
display: none;
}
h1 {
position: relative;
padding: 0;
margin: 10;
font-weight: 300;
font-size: 50px;
color: #080808;
-webkit-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
text-align: center;
font-style: italic; font-family: "Playfair Display","Bookman",serif;
}
h2 {
font-style: italic; font-family: "Playfair Display","Bookman",serif;
color:#999; letter-spacing:-0.005em; word-spacing:1px;
font-size: 1.25em;
font-weight: bold;
}
</style>
<body>
<div class='centerplease'>
<h1> Example: FAQ's using Accordion in CSS </h1>
</div>
<br>
<div class="faq">
<div>
<input type="checkbox" id="question1" name = "q" class="questions">
<div class="plus"> + </div>
<label for="question1" class="question">
<h2> This is the question that will be asked? </h2>
</label>
<div class="answers">
<h2> What if the answer is really long and wraps the whole page and you never want to finish it but you have to because it?s the answer! </h2>
</div>
</div>
<div>
<input type="checkbox" id="question2" name="q" class="questions">
<div class="plus"> + </div>
<label for="question2" class="question">
<h2> Short Question? </h2>
</label>
<div class="answers">
<h2> short! </h2>
</div>
</div>
<div>
<input type="checkbox" id="question3" name="q" class="questions">
<div class="plus"> + </div>
<label for="question3" class="question">
<h2> But what if the question is really long and wraps the whole page and you feel like you will never finish reading the question? </h2>
</label>
<div class="answers">
<h2> this is the answer! </h2>
</div>
</div>
</div>
</body>
</html>
Explanation:
In the previous example, we generated an accordion using CSS. Upon clicking on a specific section, the description for that section expands.
Output:
Following is the output of this example:
Example 4:
Example
<! DOCTYPE html>
<html>
<head>
<title> Accordion CSS Example </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
min-width: 150px;
height: 100%;
margin: 0 auto;
overflow-y: scroll;
font-family: sans-serif;
color: rgba(48, 69, 92, 0.8);
}
.accordion-bral {
min-height: 0;
min-width: 220px;
width: 100%;
height: 100%;
background-color: #FFF;
margin: 0px!important;
}
.accordion-bral .ac-label {
font-family: Arial, sans-serif;
padding: 5px 20px;
position: relative;
display: block;
height: auto;
cursor: pointer;
color: #777;
line-height: 33px;
font-size: 19px;
background: #EFEFEF;
border: 1px solid #CCC;
}
.accordion-bral .ac-label:hover {
background: #BBB;
}
.accordion-bral input + .ac-label {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.accordion-bral input:checked + .ac-label,
.accordion-bral input:checked + .ac-label:active {
background-color: rgba(79, 79, 79, 0.5) !important;
color: #FFF;
box-shadow: 0px 0px 0px 1px rgba(155, 155, 155, 0.3), 0px 2px 2px rgba(0, 0, 0, 0.1);
}
.accordion-bral input.ac-input {
display: none;
}
.accordion-bral .article {
background: rgb(240, 240, 240);
overflow: hidden;
height: 0px;
max-height: auto;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.accordion-bral .article p {
color: #777;
line-height: 23px;
font-size: 14px;
padding: 20px;
}
.accordion-bral input:checked ~ .article i {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.accordion-bral input:checked ~ .article.ac-content {
height: auto;
}
.accordion-bral i {
position: absolute;
transform: translate(-30px, 0);
margin-top: 16px;
right: 0;
}
.accordion-bral input:checked ~ .ac-label i:before {
transform: translate(2px, 0) rotate(-45deg);
}
.accordion-bral input:checked ~ .ac-label i:after {
transform: translate(-2px, 0) rotate(45deg);
}
.accordion-bral i:before {
content: "";
position: absolute;
background-color: #808080;
width: 3px;
height: 9px;
}
.accordion-bral i:before {
transform: translate(-2px, 0) rotate(-45deg);
}
.accordion-bral i:after {
transform: translate(2px, 0) rotate(45deg);
}
accordion-bral i:after {
content: "";
position: absolute;
background-color: #808080;
width: 3px;
height: 9px;
}
ul.ac-list {
padding-left: 40px;
list-style-type: disc;
}
table.ac-table {
margin: 20px 0 20px 20px;
}
table.ac-table th {
text-align: left;
}
@media (max-width: 550px) {
.accordion-bral .ac-label {
font-family: Arial, sans-serif;
padding: 5px 20px;
position: relative;
display: block;
height: auto;
padding-right: 40px;
cursor: pointer;
color: #777;
line-height: 33px;
font-size: 19px;
background: #EFEFEF;
border: 1px solid #CCC;
}
.accordion-bral i {
position: absolute;
transform: translate(-30px, 0);
margin-top: 2%;
right: 0;
}
}
</style>
<body>
<div class="accordion-bral">
<div>
<input class="ac-input" id="ac-1" name="accordion-1" type="checkbox" checked/>
<label class="ac-label" for="ac-1"> HTML and CSS only <i> </i> </label>
<div class="article ac-content">
<div>
<table class="ac-table" border="1" style="width:70%">
<tr>
<th> Name </th>
<th> Surname </th>
<th> Age </th>
</tr>
<tr>
<td> Jill </td>
<td> Smith </td>
<td> 50 </td>
</tr>
<tr>
<td> Eve </td>
<td> Jackson </td>
<td> 94 </td>
</tr>
</table>
</div>
<br>
</div>
</div>
<div>
<input class="ac-input" id="ac-2" name="accordion-1" type="checkbox" checked/>
<label class="ac-label" for="ac-2"> responsive accordion <i> </i> </label>
<div class="article ac-content">
<div style="padding: 0 30px 30px 60px; width:100%;"> <img src="https://placehold.co/400x300/34495e/ffffff?text=Logo"> </div>
</div>
</div>
<div>
<div>
<input class="ac-input" id="ac-4" name="accordion-1" type="checkbox" />
<label class="ac-label" for="ac-4"> Forms example <i> </i> </label>
<div class="article ac-content">
<div style="padding: 0 0 40px 40px;">
<form id="contact_form" action="#" method="POST" enctype="multipart/form-data">
<div class="row">
<label for="name">Your name: </label>
<br />
<input id="name" class="input" name="name" type="text" value="" size="30" />
<br />
</div>
<div class="row">
<label for="email"> Your email: </label>
<br />
<input id="email" class="input" name="email" type="text" value="" size="30" />
<br />
</div>
<div class="row">
<label for="message"> Your message: </label>
<br />
<textarea id="message" class="input" name="message" rows="7" cols="30"> </textarea>
<br />
</div>
<input id="submit_button" type="submit" value="Send email" />
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Explanation:
In the preceding instance, an accordion was crafted using CSS. Upon clicking on a specific section, the corresponding description is revealed.
Output:
Following is the output of this example:
Properties
Depending on the exact design and organization you're going for, there are a variety of properties you can use in CSS to create an accordion-style interface. Here are a few typical characteristics, though, along with an explanation:
- Display Property:
- Display: This property is often set to flex or grid to control the layout of the accordion items.
- Border Property:
- Border: Used to set borders around the accordion items or panels.
- Margin and Padding Properties:
- Margin: Specifies the outside margin of an accordion item.
- Padding: Specifies the padding inside an accordion item.
- Cursor Property:
- Cursor: Determines the type of cursor to be displayed when hovering over the accordion headers. It is often set to a pointer to indicate interactivity.
- Background Property:
- Background-color: Sets the background color of the accordion headers or panels.
- Transition Property:
- Transition: Used to add smooth transitions when the accordion items expand or collapse. It specifies the CSS properties to transition and the duration of the transition.
- Position Property:
- Position: Determines the positioning method of the accordion items. It might be set to relative or absolute in certain cases.
- Overflow Property:
- Overflow: Specifies how content that overflows the box is handled. It might be set to hide content that overflows the accordion items.
- Visibility Property:
- Visibility: Used to control the visibility of the accordion items. It might be set to hide when an item is collapsed and visible when expanded.
- Height and Max-Height Properties:
- Height: Sets the height of the accordion items. It might be used to control the default height before an item is expanded.
- Max height: Specifies the maximum height an accordion item can have, often used with transitions for a smooth animation effect.
These characteristics serve as an initial reference; the specific properties employed will depend on the distinctive design and layout requirements of the accordion. Furthermore, dynamic actions and user engagement can be managed through scripting languages like JavaScript.
Conclusion
In summary, an accordion is a versatile design pattern in CSS that organizes content into collapsible panels, optimizing screen space and enhancing user navigation. Developers leverage properties such as display, transition, and height to craft visually appealing interfaces with smooth animations.
In numerous scenarios, JavaScript complements CSS by enabling interactive functionalities such as expanding headers upon clicking. This dynamic and compact layout facilitates improved readability and organization of information, thereby enhancing the overall user experience on the web.