Smooth Accordion HTML And CSS Only
Live Preview Compare Hosting

Smooth Accordion HTML And CSS Only

Smooth accordion HTML is created by using CSS without any javascript, jQuery, or Bootstrap. But we can use this accordion HTML in every project, does not matter what programming language you are using.

See more accordion HTML

Add HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>How To Create Smooth Accordion HTML And CSS Only</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div class="outer">
        <details open>
            <summary>What is Lorem Ipsum?</summary>
            <div class="faq-content">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
        </details>

        <details>
            <summary>Why do we use it?</summary>
            <div class="faq-content">
                <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>
        </details>
        <details>
            <summary>Where does it come from?</summary>
            <div class="faq-content">
                <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words</p>
            </div>
        </details>
        <details>
            <summary>Where can I get some?</summary>
            <div class="faq-content">
                <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
            </div>
        </details>
    </div>
</body>
</html>

Add CSS

.outer {
    max-width: 500px;
    margin: 0 auto;
    font-family: arial;
    line-height: 26px;
}
.faq-content {
    background-color: #f1f1f1;
    padding: 5px 20px;
    border-radius: 5px;
}
summary {
    background-color: #2196f3;
    color: #fff;
    padding: 16px;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    font-size: 20px;
    outline: none;
    margin: 20px 0px;
}
details > summary::-webkit-details-marker {
    display: none;
}
details[open] summary ~ * {
    animation: smooth 0.4s ease-in-out;
}
@keyframes smooth {
    0% {
        opacity: 0;
        margin-top: -10px;
    }
    100% {
        opacity: 1;
        margin-top: 0px;
    }
}
details > summary::after {
    position: absolute;
    content: "+";
    right: 25px;
}
details[open] > summary::after {
    position: absolute;
    content: "-";
    right: 25px;
}

Leave a Comment