company logo

Before you start

Components List

Navigation

Data Display

Forms

Creating an Accordion using HTML, CSS, and Javascript

What you'll learn

  • DOM Manipulation and Event Handling
  • Flexbox

Prerequisites

  • Basic HTML, CSS, and Javascript

React verison coming soon!

The Code

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Static Site</title>
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
       <div class="container">
            <div class="accordion">
                <div class="toggle-cont">
                    <p>Why is the sky blue?</p>
                    <span class="arrow">&#x25BC;</span>
                </div>
                
                <p class="content hide">The sky appears blue due to sunlight scattering by atmospheric molecules, 
                favoring shorter blue wavelengths.</p>
            </div>
            <div class="accordion">
                <div class="toggle-cont">
                    <p>How hot is the earths core on a tuesday?</p>
                    <span class="arrow">&#x25BC;</span>
                </div>
                
                <p class="content hide">The Earth's core temperature remains consistent regardless of the day of the week, 
                estimated between 9,000°F and 11,000°F 
                    (about 5,000°C to 6,000°C). This intense heat is due to residual energy from Earth's formation, radioactive decay, 
                    and pressure 
                    at the core's center.</p>
            </div>
            <div class="accordion">
                <div class="toggle-cont"> 
                    <p>What animal flies the fastest?</p>
                    <span class="arrow">&#x25BC;</span>
                </div>
                <p class="content hide">The peregrine falcon is the fastest animal in flight, reaching speeds over 
                240 mph (386 km/h) during its hunting dive, 
                    known as a "stoop."
                </p>
            </div>
        </div>
    <script src="script.js"></script>
    </body>
    </html>
Open on CodeSandboxOpen Sandbox

* If the component preview isn't loading, try refreshing the page.

* You can adjust the size of the code preview and code by draging the sides!

Explanation

HTML

  • We first create an overall container to hold our three accordion items. Within each accordion, we have a flex container to create the question with the toggle at the end. Then the paragraph that contains the answer, will be hidden by default

CSS

  • We give our container some margin to center more closely on the page.
  • We style our accordion container, while also styling our toggle-cont container to be a flex container to separate the title and the dropdown icon
  • We hide our answer by default with hide and add a class to rotate the arrow when opened.

Javascript

  • Our JS is very simple, we will select all of our arrow icons with querySelectorAll. We then use the forEach method to cycle through and add an event listener 'click' to each arrow.
  • Within our event listener, we will create a variable to hold the content we want to open, which is our paragraph with class content. 'arrow.closest('.toggle-cont')' will find the nearest ancestor that has the matching class. Once found, '.nextElementSibling', will locate the next sibling, which is always the content we want to show!
  • We will then use this content variable to toggle the container when we click the arrow. We will also rotate the arrow onClick as well!

Made by Sam Kotecha

linkedin logo