Definition of Pure CSS Accordion
Pure CSS Accordion is the animated control element of the vertical list, items, and thumbnail. It is the control function of the assembled vertical list in the web application. It is the element used to manage the space of lists and their information in the web application. It shows the header of description and information display as per the user’s requirements in the web application. It is hiding the information of the stacked standing list and displays as per necessity. It is to make a short size web page and create more user interaction using the topic heading.
Syntax:
Syntax for HTML page is below.
<div class="accordion">
<span id="accordion1"> </span>
<div class="accordions">
<dl class="accordion1">
<dd>
<a href="#accordion1"> Title of the ACCORDION ITEM… </a>
<div>
<p>
The Description or information of the ACCORDION ITEM…
</p>
</div>
<dd>
</dl>
</div>
</div>Description:
- The class=”accordion” is used in the HTML page.
- The class=”accordions” is used to bind the title and information of the accordion elements.
- The class=”accordion1″ with <dd> tag used for create data of the list.
- The <span> tag with id=”accordion1″ is used connect description and their list respectively.
Style sheet syntax is below:
.accordion {
position: relative;
width: 500px;
color: black;
}
.accordions {
overflow: hidden;
}
.accordions dl dd a {
background-color: grey;
border: 1px solid;
display: block;
}
.accordions dl dd div {
overflow: hidden;
}
.accordions dl dd div {
text-align: center;
}
.accordions dl dd a:hover {
box-shadow: 0px 1px 5px rgba(0, 0, 0.5, 0.6) inset;
}
#accordion1:target ~ .accordions .accordion1 dd div {
height: 110px;
}Description:
- The .accordions are set in the hidden description box and show after the hover effect.
- The <span> tag with .accordions set the height of description box.
- It sets other styles as per the user’s requirement and website management.
How does Pure CSS Accordion work?
There are two pure.css links in the framework. These responsive and non-responsive links for accordion are below.
- The pure.css responsive framework link for the accordion is added to the HTML files.
<link rel="stylesheet"
href="https://unpkg.com/[email protected]/build/base-min.css">- The pure.css non-responsive framework link for the accordion is added to the HTML files.
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-nr-min.css">- The pure.css alternate CDNs file for the accordion is added to the HTML files.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.3/pure-min.css"/>- Webpage syntax.
<body>
<div class="accordion">
<span id="accordion1"> </span>
<span id="accordion3"> </span>
<div class="accordions">
<dl class="accordion1">
<dd>
<a href="#accordion1"> FIRST ITEM </a>
<div>
<p>The Pure CSS accordion is the element used to manage the space of lists and their information in the web application.
</p>
</div>
<dd>
</dl>
</div>
</div>
</body>- The style sheet syntax adds in the HTML page.
<style>
.accordion {
position: relative;
width: 500px;
color: black;
margin: 52px auto;
}
.accordions {
background-color: white;
overflow: hidden;
}
.accordions dl dd a {
background-color: grey;
border: 1px solid;
display: block;
font-size: 20px;
padding: 5px 22px;
}
.accordions dl dd div {
height: 0;
overflow: hidden;
box-shadow: 0 0 2px rgba(0, 0, 1, 1) inset;
}
.accordions dl dd div {
color: blue;
font-size: 12px;
padding: 5px;
text-align: center;
}
.accordions dl dd a:hover {
box-shadow: 0px 1px 5px rgba(0, 0, 0.5, 0.6) inset;
-webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0.5, 0.6) inset;
}
#accordion1:target ~ .accordions .accordion1 dd div {
height: 110px;
}
</style>Examples
Let us discuss a few examples.
Example #1: The basic example and output are below
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> Pure CSS Accordion </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css">
<style>
.accordion {
position: relative;
width: 500px;
color: black;
margin: 52px auto;
}
.accordions {
background-color: white;
overflow: hidden;
}
.accordions dl dd a {
background-color: grey;
border: 1px solid;
display: block;
font-size: 20px;
padding: 5px 22px;
}
.accordions dl dd div {
height: 0;
overflow: hidden;
box-shadow: 0 0 2px rgba(0, 0, 1, 1) inset;
}
.accordions dl dd div {
color: blue;
font-size: 12px;
padding: 5px;
text-align: center;
}
.accordions dl dd a:hover {
box-shadow: 0px 1px 5px rgba(0, 0, 0.5, 0.6) inset;
-moz-box-shadow: 0px 1px 5px rgba(0, 0, 0.5, 0.6) inset;
-webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0.5, 0.6) inset;
}
#accordion1:target ~ .accordions .accordion1 dd div {
height: 110px;
}
#accordion2:target ~ .accordions .accordion2 dd div {
height: 240px;
}
#accordion3:target ~ .accordions .accordion3 dd div {
height: 200px;
}
</style>
</head>
<body>
<div class="accordion">
<span id="accordion1"> </span>
<span id="accordion2"> </span>
<span id="accordion3"> </span>
<div class="accordions">
<dl class="accordion1">
<dd>
<a href="#accordion1"> FIRST ACCORDION ITEM </a>
<div>
<p>It is the animated control element of the vertical list, items, and thumbnail. It is the control function of the assembled vertical list in the web application.
</p>
</div>
<dd>
</dl>
<dl class="accordion2">
<dd>
<a href="#accordion2"> SECOND ACCORDION ITEM </a>
<div>
<p>It is the element used to manage the space of lists and their information in the web application. It shows the header of description and information display as per the user’s requirements in the web application.
</p>
</div>
</dd>
</dl>
<dl class="accordion3">
<dd>
<a href="#accordion3"> THIRD FIRST ACCORDION ITEM </a>
<div>
<p>The Pure CSS accordion is hidden the information of the stacked standing list and displays it as per necessity. It is to make a short size web page and create more user interaction using the topic heading.
</p>
</div>
</dd>
</dl>
</div>
</div>
</body>
</html>
Example #2: Images, example, and output is below
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> Pure CSS Accordion </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css">
<style>
.accordion {
position: relative;
width: 500px;
color: black;
margin: 52px auto;
}
.accordions {
overflow: hidden;
}
.accordions dl dd a {
background-color: grey;
border: 1px solid;
display: block;
font-size: 20px;
padding: 5px 22px;
}
.accordions dl dd div {
height: 0;
overflow: hidden;
box-shadow: 0 0 2px rgba(0, 0, 1, 1) inset;
}
.accordions dl dd a:hover {
box-shadow: 0px 1px 5px rgba(0, 0, 0.5, 0.6) inset;
-moz-box-shadow: 0px 1px 5px rgba(0, 0, 0.5, 0.6) inset;
-webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0.5, 0.6) inset;
}
#accordion1:target ~ .accordions .accordion1 dd div {
height: 250px;
}
#accordion2:target ~ .accordions .accordion2 dd div {
height: 240px;
}
</style>
</head>
<body>
<div class="accordion">
<span id="accordion1"> </span>
<span id="accordion2"> </span>
<span id="accordion3"> </span>
<div class="accordions">
<dl class="accordion1">
<dd>
<a href="#accordion1"> FIRST ACCORDION ITEM </a>
<div>
<p>
<img src="images/Desert.jpg" alt="" />
</p>
</div>
<dd>
</dl>
<dl class="accordion2">
<dd>
<a href="#accordion2"> SECOND ACCORDION ITEM </a>
<div>
<p>
<img src="images/Desert.jpg" alt="" />
</p>
</div>
</dd>
</dl>
</div>
</div>
</body>
</html>
Example #3: Combined information and image Example and output are below
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> Pure CSS Accordion </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css">
<style>
.accordion {
position: relative;
width: 500px;
color: black;
margin: 52px auto;
}
.accordions {
background-color: white;
overflow: hidden;
}
.accordions dl dd a {
background-color: grey;
border: 1px solid;
display: block;
font-size: 20px;
padding: 5px 22px;
}
.accordions dl dd div {
height: 0;
overflow: hidden;
box-shadow: 0 0 2px rgba(0, 0, 1, 1) inset;
}
.accordions dl dd a:hover {
box-shadow: 0px 1px 5px rgba(0, 0, 0.5, 0.6) inset;
-moz-box-shadow: 0px 1px 5px rgba(0, 0, 0.5, 0.6) inset;
-webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0.5, 0.6) inset;
}
#accordion1:target ~ .accordions .accordion1 dd div {
height: 100px;
}
#accordion2:target ~ .accordions .accordion2 dd div {
;
}
</style>
</head>
<body>
<div class="accordion">
<span id="accordion1"> </span>
<span id="accordion2"> </span>
<span id="accordion3"> </span>
<div class="accordions">
<dl class="accordion1">
<dd>
<a href="#accordion1"> FIRST ACCORDION ITEM </a>
<div>
<p>It is the animated control element of the vertical list, items, and thumbnail. It is the control function of the assembled vertical list in the web application.
</p>
</div>
<dd>
</dl>
<dl class="accordion2">
<dd>
<a href="#accordion2"> SECOND ACCORDION ITEM </a>
<div>
<p>
<img src="images/Desert.jpg" alt="" />
</p>
</div>
</dd>
</dl>
</div>
</div>
</body>
</html>
Conclusion
It is an animated, user-friendly, and space-saving function in websites. It is helpful to interact with users and get information as per requirement. It also helps to make elegant and attractive web applications.
Recommended Articles
This is a guide to the Pure CSS Accordion. Here we discuss the Introduction, Working of Map Foreach Function, Rules and Regulations for Map Foreach. You may also have a look at the following articles to learn more –
