How To Create An Accordion Using HTML And CSS

Create An Accordion using HTML and CSS. In this tutorial, you will learn how to create an Accordion by using HTML, CSS, and Javascript. As we know, Accordion is a power of element containing a vertically piled list of items, such as labels or thumbnails, etc. A standard example of an accordion is the Show/Hide operation of content but extended to have multiple sections in a list.

Why we Create An Accordion.

Well, We should use accordion when we have big content. It will reduce the complexity of our content by adding a toggle where we want. They will hide complete content, but when the user wants to read then he just needs to press a toggle and see content regarding the title of the toggle. Alright So, let’s start to write HTML CSS and javascript code to build our responsive accordion. If you don’t have experience in web development then you need to learn HTML Online.

First of all, open your text editor where you want to write code. After that, Create a file and named it like Index.html. Well, you’ve done just copy below code and paste into your HTML file.

HTML Code

<button style="background-color:#ab2073;color:#fff;" class="soft-accordion">Accordion 1</button>
<div class="section">
  <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English..</p>
</div>
<button style="background-color:#b71dbf;color:#fff;" class="soft-accordion">Accordion 2</button>
<div class="section">
  <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
</div>
<button style="background-color:#d61a2d;color:#fff;" class="soft-accordion">Accordion 3</button>
<div id="foo" class="section">
  <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
</div>

CSS Code

<style>
button.soft-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;}
button.soft-accordion.active, button.soft-accordion:hover {
    background-color: #ddd;}
button.soft-accordion:after {    content: '\02795';
    font-size: 13px;    color: #fff;
    float: right;    margin-left: 5px;
}
button.soft-accordion.active:after { content: "\2796";}
div.section {
    padding: 0 18px;    background-color: white;
    max-height: 0;    overflow: hidden;
    transition: 0.6s ease-in-out;    opacity: 0;}
div.section.show {    opacity: 1;    max-height: 500px;  }
</style>

Javascript Code:

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

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
  }}
</script>

Alright, you’ve all done just copy all HTML CSS and java code and place where you want to show Accordion. Please let me know how this article was helpful in the comment below.

Visit our website to learn WordPress, Digital Marketing, Search Engine Optimization, Programming. https://softcodeon.com