Why we need to use Accordion.??
When we have large content display on webpage but we have to display only small portion on web page that time we can used accordion. In this only display only title of content whenever hover or click on this it will display whole content.
Here i share demo of accordion .
<style>
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
</style>
</head>
<body>
<h2 style="color: blue;">Accordion Demo</h2>
<button class="accordion">Fruxinfo Web design </button>
<div class="panel">
<p><b>Fruxinfo pvt. ltd. </b></br>We have 4+ year proffesional experienced designer. </p>
</div>
<button class="accordion">Fruxinfo app developement </button>
<div class="panel">
<p><b>Fruxinfo pvt. ltd. </b></br>We have 3+ year proffesional experienced app developer.</p>
</div>
<button class="accordion">fruxinfo Graphics</button>
<div class="panel">
<p><b>Fruxinfo pvt. ltd. </b> We are providing logodesign , PSD ,PSD to HTML. We have experienced designer for graphics. </p>
</div>
<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.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
Accordion Demo
Fruxinfo pvt. ltd. We have 4+ year proffesional experienced designer.
Fruxinfo pvt. ltd. We have 3+ year proffesional experienced app developer.
Fruxinfo pvt. ltd. We are providing logodesign , PSD ,PSD to HTML. We have experienced designer for graphics.
Fruxinfo pvt.ltd. 
Fruxinfo Pvt. Ltd. I'Our company is 7 year old. We are a highly reputed company that has been providing quite a number of digital oriented services including SMO, SEO, web development and Mobile development services across board. Additionally, our professionals have been involved in all various developments that include designing and creation of application that meet accepted standards, all these enabled by the use of versatile programming languages that have the greatest impact on business irrespective of the industry. 
0 coment�rios: