Expanding and collapsing Javascript accordion when a new tab is opened

Question

Expanding and collapsing Javascript accordion when a new tab is opened

Is there a way to prevent previously opened accordions from remaining open when opening another accordion? Any help on fixing this issue would be greatly appreciated. Thank you!

let acc = document.getElementsByClassName('ac-btn');
let i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle('active-accardacon');
    this.classList.toggle('active-ac');
    this.nextElementSibling.classList.toggle('show');
  }
}

<div class="accardacons">
  <h2>Explanation of Steps</h2>

  <div class="ac">
    <button class='ac-btn'>How do our projects work?</button>
    <div class="read-more-ac">
      <p>Lorem ipsum dummy text...</p>
    </div>
  </div>

  <div class="ac">
    <button class='ac-btn'>More details about the steps</button>
    <div class="read-more-ac">
      <p>Lorem ipsum dummy text...</p>
    </div>
  </div>

  <div class="ac">
    <button class='ac-btn'>Can you really trust us?</button>
    <div class="read-more-ac">
      <p>Lorem ipsum dummy text...</p>
    </div>
  </div>

  <div class="ac">
    <button class='ac-btn'>What guarantees do you have for your work?</button>
    <div class="read-more-ac">
      <p>Lorem ipsum dummy text...</p>
    </div>
  </div>

</div>

javascript html css

Answer 1

Answer №1

The toggleAccordion() function provided below enhances your current functionality by following these steps:

It toggles the respective classes for the clicked accordion's elements (the button and its next sibling <div>), which aligns with what you're already doing;
Furthermore, it searches for elements with those classes and removes the classes from each one except for the button that was just clicked or its adjacent <div>.

let acc = document.querySelectorAll('.ac-btn');

function toggleAccordion() {
  this.classList.toggle('active-accardacon');
  this.classList.toggle('active-ac');
  this.nextElementSibling.classList.toggle('show');
  this.closest('.accardacons').querySelectorAll('.active-accardacon, .show').forEach(element => {
    if (element !== this && element !== this.nextElementSibling) {
      element.classList.remove('active-accardacon', 'active-ac', 'show');
    }
  });
}

acc.forEach(button => {
  button.addEventListener('click', toggleAccordion);
});

<div class="accardacons">
  <h2>Description of Steps</h2>

  <div class="ac">
    <button class='ac-btn'>How do our projects operate?</button>
    <div class="read-more-ac">
      <p>Lorem ipsum dummy text generated simply with no meaning in the printing industry and using graphic designers prints but newspapers and magazines in columns and lines as needed</p>
    </div>
  </div>

  <div class="ac">
    <button class='ac-btn'>More details on work stages</button>
    <div class="read-more-ac">
      <p>Lorem ipsum dummy text generated simply with no meaning in the printing industry and using graphic designers prints but newspapers and magazines in columns and lines as needed</p>
    </div>
  </div>

  <div class="ac">
    <button class='ac-btn'>Can you really trust us?</button>
    <div class="read-more-ac">
      <p>Lorem ipsum dummy text generated simply with no meaning in the printing industry and using graphic designers prints but newspapers and magazines in columns and lines as needed</p>
    </div>
  </div>

  <div class="ac">
    <button class='ac-btn'>What guarantee do you have for your work?</button>
    <div class="read-more-ac">
      <p>Lorem ipsum dummy text generated simply with no meaning in the printing industry and using graphic designers prints but newspapers and magazines in columns and lines as needed</p>
    </div>
  </div>

</div>

Answer 2

The toggleAccordion() function provided below enhances your current functionality by following these steps:

It toggles the respective classes for the clicked accordion's elements (the button and its next sibling <div>), which aligns with what you're already doing;
Furthermore, it searches for elements with those classes and removes the classes from each one except for the button that was just clicked or its adjacent <div>.

let acc = document.querySelectorAll('.ac-btn');

function toggleAccordion() {
  this.classList.toggle('active-accardacon');
  this.classList.toggle('active-ac');
  this.nextElementSibling.classList.toggle('show');
  this.closest('.accardacons').querySelectorAll('.active-accardacon, .show').forEach(element => {
    if (element !== this && element !== this.nextElementSibling) {
      element.classList.remove('active-accardacon', 'active-ac', 'show');
    }
  });
}

acc.forEach(button => {
  button.addEventListener('click', toggleAccordion);
});

<div class="accardacons">
  <h2>Description of Steps</h2>

  <div class="ac">
    <button class='ac-btn'>How do our projects operate?</button>
    <div class="read-more-ac">
      <p>Lorem ipsum dummy text generated simply with no meaning in the printing industry and using graphic designers prints but newspapers and magazines in columns and lines as needed</p>
    </div>
  </div>

  <div class="ac">
    <button class='ac-btn'>More details on work stages</button>
    <div class="read-more-ac">
      <p>Lorem ipsum dummy text generated simply with no meaning in the printing industry and using graphic designers prints but newspapers and magazines in columns and lines as needed</p>
    </div>
  </div>

  <div class="ac">
    <button class='ac-btn'>Can you really trust us?</button>
    <div class="read-more-ac">
      <p>Lorem ipsum dummy text generated simply with no meaning in the printing industry and using graphic designers prints but newspapers and magazines in columns and lines as needed</p>
    </div>
  </div>

  <div class="ac">
    <button class='ac-btn'>What guarantee do you have for your work?</button>
    <div class="read-more-ac">
      <p>Lorem ipsum dummy text generated simply with no meaning in the printing industry and using graphic designers prints but newspapers and magazines in columns and lines as needed</p>
    </div>
  </div>

</div>

Expanding and collapsing Javascript accordion when a new tab is opened

Answer №1

Similar questions

What could be causing axios to not function properly when used with async/await in this particular scenario

Developing a slideshow with PHP and JQuery

Issues arise when incorporating an iframe into a responsive website without the use of CSS styling

Show a popover within a parent div that has limited visible space due to its hidden overflow

werkzeug.exceptions.BadRequestKeyError: 400 Bad Request: The server is unable to process the request sent by the browser or proxy. This error occurred in a Flask web application

Having trouble importing from the public folder in CSS with Create React App?

Tips on wrapping div elements while maintaining equal width in different screen sizes using @media queries

Gather keyboard information continuously

The display of the expected outcome for the Three.js global heightmap is not appearing as intended

The Vue.js v-on:mouseover function is not functioning properly in displaying the menu

How can I prevent my JSON object from serializing .NET nulls as "null" for object members?

Utilizing React Views in an Express Environment

The operating system MacOS requests permission from the parent Node process rather than the child process

assign a role to a discord.js user using the role stored in the client class variable

Tips for saving a JavaScript function in JSON format

Tips for creating a dynamic design for an Inputfield when it is in use

What is the recommended approach for linking CSS files when utilizing ASP.NET URL routing?

What are the steps to correctly shut down an ExpressJS server?

Changing the slider based on the format of the price and user input value

Script written in PHP to retrieve text from a website, then translate and save it onto a local storage