ZonetoCode

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Accordion | ZonetoCode</title>

* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Poppins", sans-serif;
        }

body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #008080;
        }

.wrapper{
            background-color: #fff;
            padding: 15px 20px;
            height: 759px;
            width: 750px;
        }

.wrapper h1{
            font-weight: 600px;
            text-align: center;
            margin: 10px 0 20px;
        }

.wrapper .container{
            border-bottom: 1px solid #000;
        }

.container .label{
            position: relative;
            font-size: 18px;
            font-weight: 600;
            padding: 8px;
            cursor: pointer;
        }

.container .label::after{
            position: absolute;
            content: '\002b';
            top: 50%;
            right: 8px;
            transform: translateY(-50%);
            font-size: 20px;
            font-weight: 600;
        }

.container .label.active::after{
        content: '\2212';
        }

.container .content{
            padding: 0 8px;
            max-height: 0;
            overflow: hidden;
            transition: all .3s ease-out;
        }

.label.active + .content{
            margin-bottom: 8px;
        }
    </style>

</head>

<body>
    <div class="wrapper">
        <h1>Frequently Asked Question</h1>

<div class="container">
            <div class="label">What is HTML</div>
            <div class="content">
                Hypertext Markup Language (HTML) is a computer language that makes up most web
                pages and online applications. A hypertext is a text that is used to reference other pieces of text,
                while a markup language is a series of markings that tells web servers the style and structure of a
                document. HTML is very simple to learn and use.
            </div>
        </div>

<div class="container">
            <div class="label">What is CSS?</div>
            <div class="content">CSS stands for Cascading Style Sheets. It is the language for describing the
                presentation of Web pages, including colours, layout, and fonts, thus making our web pages
                presentable to the users. CSS is designed to make style sheets for the web. It is independent of
                HTML and can be used with any XML-based markup language. CSS is popularly called the design
                language
                of the web.
            </div>
        </div>
        <div class="container">
            <div class="label">What is JavaScript?</div>
            <div class="content">JavaScript is a scripting or programming language that allows you to implement
                complex features on web pages — every time a web page does more than just sit there and display
                static information for you to look at — displaying timely content updates, interactive maps,
                animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is
                probably
                involved. It is the third of the web trio.</div>
        </div>

<div class="container">
            <div class="label">What is PHP?</div>
            <div class="content">PHP is a server-side and general-purpose scripting language that is especially
                suited for web development. PHP originally stood for Personal Home Page. However, now, it stands
                for
                Hypertext Preprocessor. It’s a recursive acronym because the first word itself is also an
                acronym.
            </div>
        </div>

<div class="container">
            <div class="label">What is MySql?</div>
            <div class="content">MySQL is a relational database management system (RDBMS) developed by Oracle that is
                based on structured query language
                (SQL). A database is a structured collection of data. It may be anything from a simple shopping list to
                a picture
                gallery or a place to hold the vast amounts of information in a corporate network.
            </div>
        </div>
    </div>

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

var content = this.nextElementSibling;
                    if (content.style.maxHeight) {
                        content.style.maxHeight = null;
                    } else {
                        content.style.maxHeight = content.scrollHeight + "px";
                    }
                });

}
    </script>

</body>

</html>