Skip to content

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");
            
        }

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: