How to create a responsive accordion with html and css
How to create a responsive accordion with html and css
Accordions are useful when you want to toggle between hiding and showing large amount of content.
We will create accordion with very simple and easy way.
Here is the code
<!DOCTYPE html>
<html>
<head>
<style>
button.accordion {
background-color: #cb4d4d;
color: #fff;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active,
button.accordion:hover {
background-color: #7d1e1e;
}
button.accordion:after {
/* Unicode character for "plus" sign
(+) is '\02795' */
content: '\02795';
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
/* Unicode character for "minus" sign
(-) is '\2796' */
content: "\2796";
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: 0.6s ease-in-out;
opacity: 0;
}
div.panel.show {
opacity: 1;
max-height: 500px;
}
</style>
</head>
<body>
<h2>Accordion Example</h2>
<p></p>
<button class="accordion">HTML
</button>
<div class="panel">
<p>HTML stand for hypertext markup language.
it is used for web development.
It is very easy for everyone to learn.
It use tags.</p>
</div>
<button class="accordion">Css</button>
<div class="panel">
<p>CSS stand for Cascading Style Sheet.
it is used for web development.
It is very easy for everyone to learn.
</p>
</div>
<button class="accordion">JavaScript
</button>
<div class="panel">
<p>JavaScript is front-end web development language.
it is used for web development.
It is very easy for everyone to learn.
</p>
</div>
<script>
var acc = document
.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList
.toggle("show");
}
}
</script>
</body>
</html>
Comments
Post a Comment