ACCORDION

HII VIEWRS,

Today I am here with an another new interesting blog and that is ACCORDION. In previous blog we have learned how to make a Popup With Close Button. And now you guys gonna learn how to make Accordion. You may see this Accordion in many websites. These Accordions used to represent some FAQ(Frequently Asked Questions).

Snap Here To Download The Source Code.

You can use the code given below to use this Accordion In your Website.

If it is difficult to understand the . Have a look at this video.

Video tutorial for Accordion

HTML:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Popup with close button</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container" onclick="toggle()">
        <a href="#">Click Here</a>
    </div>

<div id="popup">
        <h2>Notifications</h2> <a href="#" onclick="toggle()">×</a>
        <ul>
            <li class="popup">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
            <li class="popup">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
            <li class="popup">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
            <li class="popup">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
            <li class="popup">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        </ul>
    </div>
</body>

</html>

CSS:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Poppins, sans-serif;
}

body{
    background: #dde1e7;
}

.container a{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-decoration: none;
    color: black;
    background: #dde1e7;
    padding: 10px 10px;
    border-radius: 5px;
    box-shadow: -3px -3px 7px #ffffffc9,
                2px 2px 5px rgba(0, 0, 0, .473);
}

#popup{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #dde1e7;
    padding: 50px;
    visibility: hidden;
    opacity: 0;
    overflow: hidden;
    box-shadow: 0 5px 30px rgba(0, 0, 0, .30);
    
}

#popup a{
    position: absolute;
    top: 10px;
    right: 30px;
    background: black;
    color: white;
    border-radius: 5px;
    text-decoration: none;
    padding: 5px 10px;
    box-shadow: -3px -3px 7px #ffffffc9,
    2px 2px 5px rgba(0, 0, 0, .473);
}

#popup.active{
    width: 40%;
    border-radius: 5px;
    visibility: visible;
    opacity: 1;
    transition: 0.5s;
}

#popup h2{
    position: absolute;
    top: 5px;
    left: 10px;
    padding: 5px 5px;
    margin: 10px 0px;
}

#popup ul{
    position: relative;
    top: 20px;
    left: -25px;
}

#popup ul li{
    padding: 5px 5px;
}

Tech Loop

JavaScript

ACCORDION

Video tutorial for Accordion

Thanks For Visiting

Post a Comment

Post a Comment

About Us

Formulir Kontak

JavaScript

Accordion

ACCORDION

Video tutorial for Accordion

Thanks For Visiting

You might like

Post a Comment

Post a Comment

Formulir Kontak