Accordion Assignment 4

            <!DOCTYPE html>
            <html lang="en">
            <head>
                <charset="UTF-8">
                <title>Title of the document</title>
            </head>
            <body>
            Your content will be here
            </body>
            </html>

1.2 Define the hierarchy of the text that you would like to use in accordion. For example, Semester 1, Semester 2, Semester 3 will be visible on the screen and after clicking, you'll see the list of the courses for each semester.

1.3 Add this code between the <body></body> tags. Place instead Semester 1 the label that you came up with. This is how you create visible buttons(panels) of the accordion. The part of the code with courses names is the internal panel of your accordion. Be creative and use your own information to place between <div></div> tags.

            <button class="semester">
                Semester 1
            </button>
            <div class="courses">
                <ol>
                    <li>Typography 1</li>
                    <li>Design 1</li>
                    <li>Digital Technology 1</li>
                    <li>Motion Design 1</li>
                    <li>Creative Thinking</li>
                    <li>Web Technology 1</li>
                    <li>College Reading and Writing Skills</li>
                </ol>
            </div>

1.4 Copy and paste the code above as many times as many visible and invisible panels you would like to create for your accordionand, of course, add the information to each button(panel) that you added. Don't forget to add your own class names for styling a little later! For example,

            <button class="your-label-class"> 
            <div class="your-description">

1.5 Make sure, that you are adding a class="container" to your entire code like this:

            <div class="your-container-class">

                <button class="your-label-class">
                    Your Label
                </button>
                <div class="your-description-class">
                    <ol>
                        <li>Your Text</li>
                        <li>Your Text</li>
                        <li>Your Text</li>
                    </ol>
                </div>
                <button class="your-label-class-1">
                    Your Label-1
                </button>
                <div class="your-description-class-1">
                    <ol>
                        <li>Your Text</li>
                        <li>Your Text</li>
                        <li>Your Text</li>
                    </ol>
                </div>
                <button class="your-label-class-2">
                    Your Label-2
                </button>
                <div class="your-description-class-2">
                    <ol>
                        <li>Your Text</li>
                        <li>Your Text</li>
                        <li>Your Text</li>
                    </ol>
                </div>

            </div>

1.6 Don't forget to create external styles.css file and JavaScript scripts.js file and link them in the <head></head> section and above </body> tag respectively. This is how you create the linking:

    <!-- Link to external CSS file -->
    <link rel="stylesheet" type="text/css" href="styles.css">
    
    <!-- Link to external JavaScript file -->
    <script src="scripts.js"></script>

2. Style your accordion using CSS

2.1 Now you can use all class names you created and start working on designing your own project. Open styles.css document and start to apply your values to the properties. For example,

            .semester {
                background-color: #4B0082;
                color: #FFF;
                cursor: pointer;
                padding: 11px;
                width: 100%;
                border-width: 3px;
                border-color: #FFF;
                border-style: outset;
                text-align: center;
                outline: none;
                font-size: 27px;
                transition: 0.4s;
                text-transform: uppercase;
                }

            p {
                text-align: center;
            }

            .active,
            .semester:hover {
                background-color: #BA55D3;
            }

            .courses {
                padding: 0 18px;
                background-color: white;
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.2s ease-out;
                margin: auto;
            }

            .semester {
                margin: 0 auto;
            }

            .semester-container {
                width: 65%;
                margin: auto;
            }

Use your class names!

Attention! When you create an inner panel, please, add your class transition animation values and, in addition, create + - icons to make your accordion feel more interactive

                    .your-description-class {
                        transition: max-height 0.2s ease-out;   
                    }

                    .your-label-class:after {
                        content: '\002B';
                        color: #FFF;
                        font-weight: bold;
                        float: right;
                        margin-left: 5px;
                    }

                    .active:after {
                        content: "\2212";
                    }

3. Time for some JavaScript interactivity!

3.1 This is a simple interactivity that you have to add to your scripts.js file. Declare variables and get elements by class name. Use JavaScript to slide down the content by setting a calculated max-height, depending on the panel's height on your screen size. Toggle between adding and removing the "active" class, to highlight the button that controls the panel.

                var semesters = document.getElementsByClassName("semester");

                for (let i = 0; i < semesters.length; i++) {
                var semester = semesters[i];
                /* Toggle between adding and removing the "active" class,
                to highlight the button that controls the panel */
                semester.addEventListener("click", function () {
                this.classList.toggle("active");

                var courses = this.nextElementSibling;
                /* slide down the content by setting a calculated 
                max-height, depending on the panel's height on your screen size.*/
                if (courses.style.maxHeight) {
                    courses.style.maxHeight = null;
                } else {
                    courses.style.maxHeight = courses.scrollHeight + "px";
                }
            });
        }

How to Code Accordion?

1. Let's Start with HTML5:

1.1 Set DOCTYPE declaration for HTML5 and the character encoding (charset) declaration. The default character encoding in HTML5 is UTF-8