Skip to content

Accordion Menu 6

CODEPEN

JS Accordion Menu

Github: https://github.com/furkangulsen98/HTML-CSS-JAVASCRIPT/tree/master/Accordion%20Menu%206


HTML

    <div class="wrapper">
        <h2>Accordion Menu</h2>

        <!-- wrap 1 -->
        <div class="wrap">
            <div class="wrap_title">WRAP ONE</div>
            <div class="wrap-text">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Mollitia autem quasi inventore unde nobis voluptatibus
                    illum quae rerum laudantium minima, excepturi quis maiores.
                    Eaque quae, nam delectus explicabo, deserunt ipsum!
                </p>
            </div>
        </div>

        <!-- wrap 2 -->
        <div class="wrap">
            <div class="wrap_title">WRAP TWO</div>
            <div class="wrap-text">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Mollitia autem quasi inventore unde nobis voluptatibus
                    illum quae rerum laudantium minima, excepturi quis maiores.
                    Eaque quae, nam delectus explicabo, deserunt ipsum!
                </p>
            </div>
        </div>

        <!-- wrap 3 -->
        <div class="wrap">
            <div class="wrap_title">WRAP THREE</div>
            <div class="wrap-text">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Mollitia autem quasi inventore unde nobis voluptatibus
                    illum quae rerum laudantium minima, excepturi quis maiores.
                    Eaque quae, nam delectus explicabo, deserunt ipsum!
                </p>
            </div>
        </div>

        <!-- wrap 4 -->
        <div class="wrap">
            <div class="wrap_title">WRAP FOUR</div>
            <div class="wrap-text">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Mollitia autem quasi inventore unde nobis voluptatibus
                    illum quae rerum laudantium minima, excepturi quis maiores.
                    Eaque quae, nam delectus explicabo, deserunt ipsum!
                </p>
            </div>
        </div>

    </div>

CSS

@import url('https://fonts.googleapis.com/css?family=Ubuntu');
body {
    padding: 0;
    margin: 0;
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background: #eee;
    font-family: 'Ubuntu', sans-serif;
}
h2{
    text-align: center;
    font-weight: bold;
}
.wrapper{
    max-width: 500px;
    height: auto;
}
.wrap_title {
    width: 500px;
    height: 45px;
    line-height: 45px;
    border-radius: 30px 30px 0px 0px;
    text-align: center;
    background: #262626;
    color: #eee;
    font-weight: bold;
    cursor: pointer;
}
.wrap-text {
    padding: 10px 20px;
    border: 2px solid #262626;
    color: #262626;
    max-height: 0;
    opacity: 0;
    transition: .5s;
}
.wrap-text  p{
    transform: scale(0);
    transition: .5s;
}
.wrap.active .wrap-text {
    max-height: 200px;
    opacity: 1;
    margin-bottom: 20px;
    transition: .5s;
}
.wrap.active > .wrap-text > p {
    transform: scale(1);
}

JS

        let wrap = document.querySelectorAll(".wrap");
        
        wrap.forEach((x) => x.addEventListener("click", function () {
            this.classList.toggle("active");
        }))

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: