Fade Accordion

Home / Web Code Snippet / Fade Accordion

Fade Accordion


HTML CODE:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>
<div class="container">
    <div class="box">
        <div class="title">DATA STRUCTURE USING JAVA</div>
        <div class="content">
            Ever wondered how computers organize vast amounts of information efficiently? The answer lies in data structures - the building blocks for managing data in programs. By mastering data structures using Java.
        </div>
    </div>
    <div class="box">
        <div class="title">WEB DESIGNING</div>
        <div class="content">
            Do you envision yourself crafting stunning and user-friendly websites that not only look great but also engage and convert visitors? Then embark on a rewarding journey into the world of web design with Shaksham
        </div>
    </div>
    <div class="box">
        <div class="title">ARTIFICIAL INTELLIGENCE</div>
        <div class="content">
            Ever wonder how machines learn, make decisions, and even recognize your preferences? This is the captivating realm of Artificial Intelligence (AI), a rapidly evolving field shaping our world in profound ways.
        </div>
    </div>
</div>
</body>
</html>

CSS CODE:-

body{
            padding: 0px;
            margin: 0px;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background: black;
        }
        .container{
            position: relative;
            max-width: 600px;
        }
        .container .box{
            position: relative;
            margin: 20px;
        }
        .box .title{
            position: relative;
            background-image: linear-gradient(to right, #0f0c29, #302b63, #24243e);
            padding: 10px;
            cursor: pointer;
            color: white;
        }
        .box .title::before{
            content: '+';
            position: absolute;
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
            font-size: 25px;
        }
        .box.active .title::before{
            content: "-";
            font-size: 25px;
        }
        .box .content{
            position: relative;
            background: white;
            height: 0;
            overflow: hidden;
            overflow-y: auto;
            transition: 0.5s;
        }
        .box.active .content{
            height: 80px;
            padding: 6px;
        }

JS CODE:-

for(i = 0; i<x.length; i++){
        x[i].addEventListener('click',function(){
            this.classList.toggle("active")
        })
    }