Skip to content
Advertisements

Accordion Menu 4

CODEPEN:

JavaScript Accordion Menu

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


HTML CODE:

    <div class="container">
        <div class="accordion">Accordion Menu 4</div>

        <!-- Item 1 -->
        <div class="item">
            <div class="section">Read me</div>
            <div class="info">
                Click on an item to open. Click on its header or the list header to close.
            </div>
        </div>

        <!-- Item 2 -->
        <div class="item">
            <div class="section">Read me too</div>
            <div class="info">
                Add the class 'arrows' to nav.accordion to add dropdown arrows.
            </div>
        </div>

        <!-- Item 3 -->
        <div class="item">
            <div class="section">Item 3</div>
            <div class="info">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                sed do eiusmod tempor incididunt ut labore et dolore magna
                aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor
                pretium viverra suspendisse potenti.
            </div>
        </div>

        <!-- Item 4 -->
        <div class="item">
            <div class="section">Item 4</div>
            <div class="info">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                sed do eiusmod tempor incididunt ut labore et dolore magna
                aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor
                pretium viverra suspendisse potenti.
            </div>
        </div>

        <!-- Item 5 -->
        <div class="item">
            <div class="section">Item 5</div>
            <div class="info">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                sed do eiusmod tempor incididunt ut labore et dolore magna
                aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor
                pretium viverra suspendisse potenti.
            </div>
        </div>

    </div>

CSS CODE:

@import url('https://fonts.googleapis.com/css?family=ZCOOL+QingKe+HuangYou');
body {
    margin: 0;
    padding: 0;
    background: ;
    font-family: 'ZCOOL QingKe HuangYou', cursive;
}
.container{
    width: 325px;
    margin: 50px auto;
}
.accordion {
    width: 100%;
    background: #00bcd4;
    padding: 15px;
    box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.25);
    color: #fff;
    font-size: 21px;
    text-indent: 10px;
    box-sizing: border-box;
}
.item {
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    font-size: 18px;
    margin: 6px 0px;
    transition: .5s;
}
.section {
    position: relative;
    padding: 15px;
    color: #262626;
    cursor: pointer;
    border-bottom: 1.5px solid #ccc;
}
.info {
    width: 90%;
    color: #808080;
    max-height: 0;
    opacity: 0;
    transition: .5s;
}
.section:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    content: "\f105";
    padding-right: 10px;
    transition: .5s;
}
.item.active >  .info {
    max-height: 100%;
    margin-left: 10px;
    padding: 13px 10px 20px 10px;
    opacity: 1;
}
.item.active {
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.50);
    transform: scale(1.05);
    margin-top: 8px;
    margin-bottom: 8px;
}
.item.active > .section:before{
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    content: "\f107";
}

JS CODE:

        let item = document.querySelectorAll(".item");

        item.forEach((x) => x.addEventListener("click", itemFunction))

        function itemFunction() {
            this.classList.toggle("active")
        }
Advertisements

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: