An accordion is used to show and hide the content on click or hover of button.

It looks similar to the dropdown.

There are some differences between accordion and dropdown:-

• Width of an accordion is 100% by default, we can override it by adding our own CSS. Whereas with of dropdown is less.
• Accordion drives the page content down, while it is opened. In dropdown the content is opened over the page content.
• Accordion is used to open various sections while in dropdown onle one section is opened.

Here is the code to create Accordion:-

HTML-

<ul id="accordion"> <!-- main container of the accordion -->
    <li>
        <h2>Content1</h2> <!-- Heading1 of accordion on hover of which hidden text is shown -->
        <div class="text"> <!-- Text which will be displayed on hover of Heading1 -->
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
        </div>
    </li>
    <li>
        <h2>Content2</h2><!-- Heading2 of accordion on hover of which hidden text is shown -->
        <div class="text"><!-- Text which will be displayed on hover of Heading2 -->
           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
        </div>
    </li>
    <li>
        <h2>Content3</h2><!-- Heading3 of accordion on hover of which hidden text is shown -->
        <div class="text"><!-- Text which will be displayed on hover of Heading3 -->
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
        </div>
    </li>
    <li>
        <h2>Content4</h2><!-- Heading4 of accordion on hover of which hidden text is shown -->
        <div class="text"><!-- Text which will be displayed on hover of Heading4 -->
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
        </div>
    </li>
</ul>

CSS-

#accordion{ /*Width of the main container of accordion*/
    width: 600px;
    margin: 0px;
    padding: 0px;
    list-style: none;
}
#accordion h2{ /*Styling the heading of the content*/
    font-size: 15px;
    margin: 0px;
    padding: 10px;
    background: #33001a;
    color: #fff;
    text-align: center;
    border-bottom: 1px solid #fff;
}
#accordion li div.text{ /*Styling the content which is shown on hover of heading, initially it's display is none*/
    display: none;
    padding: 10px;
    background: #ffcce6;
    color: #000;
    border: 1px solid #ddd;
}
#accordion li:hover div.text{ /*On hover of heading, the content is shown*/
    display: block;
}

Below is the link of above code to show accordion-