Accordion

by fredericklim

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width" , initial-scale="1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="accordion-body">
        <div class="accordion">S
            <h1>Frequently Asked Questions</h1>
            <hr>
            <div class="row">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>
            <hr>
            <div class="row">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>
            <hr>
            <div class="row">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>
            <hr>
            <div...

CSS

@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap");

body {
   background-color: #0a2344;
   font-family: "rubik";
}

h1 {
   text-align: center;
}

.accordion {
   width: 800px;
   margin: 90px auto;
   color: black;
   background-color: white;
   padding: 45px 45px;
}

.accordion .row {
   position: relative;
   padding: 10px 10px;
   font-size: 30px;
   cursor: pointer;
   user-select: none;
}

.accordion .row::after {
   content: "+";
   position: absolute;
   right: 10px;
   font-size: 30px;
}

.accordion .row.active::after {
   content: "-";
}

.accordion .content {
   position: relative;
   font-size: 20px;
   text-align: justify;
   width: 780px;
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.2s ease-out;
}

.accordion .hr {
   width: 100%;
   border: 1px solid grey;
}

JavaScript

var singleActive = true;

var accordion = document.getElementsByClassName("row");
for (var row of accordion) {
    row.addEventListener("click", function() {

        if (singleActive) {
            for (var i of accordion) {
                if (i != this) {
                    i.classList.remove("active");
                    i.nextElementSibling.style.maxHeight = null;
                }
            }
        }

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