Accordion Menu 5

CODEPEN:

Accordion Menu

---

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

---

HTML CODE:

    <div class="container">
        <h2>Accordion Menu 5</h2>
        <div class="accordion_Boxes">

            <!-- Accordion Box 1 -->
            <div class="accordionBox">
                <div id="top" class="top">
                    <span>What is HTML ?</span>
                </div>
                <div class="bottom">
                    HTML is a computer language devised to allow
                    website creation. These websites can then be viewed
                    by anyone else connected to the Internet. It is relatively
                    easy to learn, with the basics being accessible to most
                    people in one sitting; and quite powerful in what it allows
                    you to create.
                </div>
            </div>

            <!-- Accordion Box 2 -->
            <div class="accordionBox">
                <div id="top" class="top">
                    <span>What is CSS ?</span>
                </div>
                <div class="bottom">
                    CSS is the language for describing the presentation 
                    of Web pages, including colors, layout, and fonts.
                    It allows one to adapt the presentation to different 
                    types of devices, such as large screens, small screens, 
                    or printers.
                </div>
            </div>

            <!-- Accordion Box 3 -->
            <div class="accordionBox">
                <div id="top" class="top">
                    <span>What is JS ?</span>
                </div>
                <div class="bottom">
                    JavaScript is a scripting language used to 
                    create and control dynamic website content—but 
                    that might not make a lot of sense if you’re new 
                    to tech.
                </div>
            </div>

        </div>
    </div>

---

CSS CODE:

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
body {
    background: #262626;
    height: 100vh;
    display: flex;
    justify-content: center;
    font-family: 'Roboto Condensed', sans-serif;
    overflow: hidden;
}
.container{
    margin-top: 60px;
    width: 375px;
    height: 400px;
}
h2{
    font-size: 30px;
    text-align: center;
    color: #eeeeee;
    font-weight: normal;
}
.accordion_Boxes{
    position: relative;
    display: block;
    width: 100%;
}
.top {
    position: relative;
    width: 100%;
    height: 57px;
    line-height: 57px;
    background: #eeeeee;
    border-top: 1px solid rgba(0, 0, 0, 0.50);
    border-bottom: 1px solid rgba(0, 0, 0, 0.50);
    border-radius: 3px;
    font-size: 18px;
    cursor: pointer;
}
.top:before{
    content: "";
    width: 20px;
    height: 20px;
    border: none;
    background: #ccc;
    border-radius: 50%;
    margin-left: 20px;
    margin-right: 10px;
    margin-top: 17px;
    display: inline-block;
    box-shadow: inset 0px 0px 12.5px #262626;
    transition: .5s;
}
.top.active:before{
    background: #386a26;
}
span{
    position: absolute;
    top: 0px;
}
.bottom {
    display: block;
    background: #dedede;
    padding: 0;
    max-height: 0;
    opacity: 0;
    transition: .5s;
}
.top.active ~ .bottom{
    padding: 25px;
    opacity: 1;
    max-height: 100%;
}

---

JS CODE:

 let topBox = document.querySelectorAll(".top");

        topBox.forEach((x) => x.addEventListener("click", dropFunction));

        function dropFunction() {
            this.classList.toggle("active");
            
        }