JavaScript Accordion with Arrows

This JavaScript Accordion with Arrows code allows expanding and collapsing content sections. When clicked, sections expand or collapse. It works by toggling a CSS class for each section. It helps in organizing and displaying content efficiently on a webpage.

You can use this code on websites to create interactive FAQ sections or collapsible content blocks. It enhances user experience by allowing them to easily navigate and find relevant information. Plus, it adds a modern and professional touch to your webpage design.

How to Create JavaScript Accordion with Arrows

1. Start by creating a new HTML file and setting up the basic structure. Define a container div with a class name “accordion”. Inside this container, create multiple “accordion__item” divs, each containing a question and an answer section. Here’s a sample HTML structure:

<div class="accordion">
  <div class="accordion__wrapper">
    <h1>Accordion</h1>
    <div class="accordion__item">
      <div class="accordion__question">
        <h2>How do I love thee?</h2>
      </div>
      <div class="accordion__answer">
        <p>
          Let me count the ways. / I love thee to the depth and breadth and height / My soul can reach, when feeling out of sight / For the ends of being and ideal grace. (Elizabeth Barrett Browning)
        </p>
      </div>
    </div>
    <div class="accordion__item">
      <div class="accordion__question">
        <h2>Can you be sick for a home you’ve never seen?</h2>
      </div>
      <div class="accordion__answer">
        <p>
          Sometimes the curtain flutters, / and I catch a glimpse / of a fawn in the shadow / that bids me to follow. / I can’t. Not yet. / But I am coming home. (Jen Rose)
        </p>
      </div>
    </div>
    <div class="accordion__item">
      <div class="accordion__question">
        <h2>Why, who makes much of a miracle?</h2>
      </div>
      <div class="accordion__answer">
        <p>
          As to me I know nothing else but miracles, / Whether I walk the streets of Manhattan, / Or dart my sight over the roofs of houses toward the sky, / Or wade with naked feet along the beach just in the edge of the water... (Walt Whitman)
        </p>
      </div>
    </div>
    <div class="accordion__item">
      <div class="accordion__question">
        <h2>Shall I compare thee to a summer’s day?</h2>
      </div>
      <div class="accordion__answer">
        <p>
          Thou art more lovely and more temperate: / Rough winds do shake the darling buds of May, / And summer’s lease hath all too short a date: / Sometime too hot the eye of heaven shines... (William Shakespeare)
        </p>
      </div>
    </div>
  </div>
</div>

2. Style the accordion components using CSS to achieve the desired look and feel. Apply styles to the question and answer sections, as well as the arrow indicators for each question. Here’s a simplified CSS snippet:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1 {
  font-family: "Amatic SC", cursive;
  font-size: 50px;
  padding-bottom: 20px;
  text-align: center;
}

.accordion {
  font-family: "Lato";
  color: #4a4a4a;
  margin: 100px 400px;
  font-size: 16px;
  line-height: 1.2;
  width: 660px;
  min-width: 360px;
}
.accordion__answer {
  padding: 10px 40px 0;
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity 0.2s ease-out;
}
.accordion__item {
  margin-bottom: 30px;
}
.accordion__question {
  position: relative;
  background: linear-gradient(to left, #7eb4e2, #f5f5f5);
  border-radius: 15px 15px 0 0;
  padding: 8px 15px 8px 40px;
  font-size: 1em;
  cursor: pointer;
  user-select: none;
}
.accordion__question::before {
  content: "";
  display: inline-block;
  border: solid #555;
  border-width: 0 2px 2px 0;
  padding: 3px;
  position: absolute;
  top: 40%;
  right: 50px;
  transform: rotate(45deg);
  transition: transform 0.2s linear;
}

.expanded .accordion__question::before {
  content: "";
  border: solid #555;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  position: absolute;
  top: 50%;
  right: 50px;
  transform: rotate(-135deg);
  transition: transform 0.2s linear;
}

.expanded .accordion__answer {
  opacity: 1;
  height: auto;
}

3. Implement the accordion functionality using JavaScript. Write code to toggle the visibility of answer sections when a question is clicked. Use event listeners to detect clicks on accordion items and manage the state of each item accordingly. Here’s a basic JavaScript implementation:

var items = document.getElementsByClassName("accordion__item");

for (i = 0; i < items.length; i++) {
  items[i].addEventListener("click", function() {
    // If the current element is already expanded, collapse it and do nothing else (return)
    if (this.classList.contains("expanded")) {
      this.classList.remove("expanded");
      return;
    }

    // Is there an expanded element?
    let expandedItem = document.getElementsByClassName("expanded")[0] || null;
    // If so, collapse it
    if (expandedItem) {
      expandedItem.classList.remove("expanded");
    }

    // Expand the current element
    this.classList.add("expanded");
  });
}

That’s all! hopefully, you have successfully created a JavaScript Accordion With Arrows. If you have any questions or suggestions, feel free to comment below.