Switch between Accordions/Tabs with JavaScript (ES6)

Question

Switch between Accordions/Tabs with JavaScript (ES6)

Encountering a minor issue with the accordion/tab layout provided in this link:

The problem is that on mobile, the "+" icon remains as "-" when opening and closing tabs. Also, in desktop view, sometimes tabs need to be clicked twice to reveal the content below. Upon inspecting in Chrome, it appears that the active class is not removed until clicking again. Is there a solution using JS to address this behavior?

const accordion = document.getElementsByClassName("accordion");
const panel = document.getElementsByClassName("panel");

for(let i = 0; i < accordion.length; i++){
  accordion[i].addEventListener('click', function(){
    removeOpen();
    // add active class to clicked element and open class to next sibling
    const toggleResult = this.classList.toggle('active');
    this.nextElementSibling.classList.toggle('panel-open', toggleResult);

  });
};

// remove open class for all elements
function removeOpen (){
    for(let i = 0; i < panel.length; i++) {
       panel[i].classList.remove('panel-open');
    }
};

javascript css dom ecmascript-6 accordion

Answer 1

Answer №1

To solve the issue of toggling in an accordion, ensure that you remove the "active" class from all other buttons except the one being clicked. Here is a refactored version of the code to achieve this:

(function() {
    const accordion = document.getElementsByClassName("accordion");
    let current = -1;

    for (let i = 0; i < accordion.length; i++) {
        accordion[i].addEventListener('click', function() {
            if (i !== current && current !== -1) {
                accordion[current].classList.remove('active');
                accordion[current].nextElementSibling.classList.remove('panel-open'); 
            }
            this.nextElementSibling.classList.toggle('panel-open');
            current = this.classList.toggle('active') ? i : -1;
        });
    };
})();

JSFiddle

EDIT:

The variable current stores the index of the active accordion element. It is used to keep track of which element is currently active and avoid removing classes unnecessarily. The value of current ranges from 0 to the length of the accordion elements. An inactive element is indicated by a value outside this range, typically -1.

This approach allows us to only remove the active class from one element at a time when another element is clicked. By checking if the clicked element is not already active, we prevent adding and immediately removing the active class during toggling operations.

Answer 2

To solve the issue of toggling in an accordion, ensure that you remove the "active" class from all other buttons except the one being clicked. Here is a refactored version of the code to achieve this:

(function() {
    const accordion = document.getElementsByClassName("accordion");
    let current = -1;

    for (let i = 0; i < accordion.length; i++) {
        accordion[i].addEventListener('click', function() {
            if (i !== current && current !== -1) {
                accordion[current].classList.remove('active');
                accordion[current].nextElementSibling.classList.remove('panel-open'); 
            }
            this.nextElementSibling.classList.toggle('panel-open');
            current = this.classList.toggle('active') ? i : -1;
        });
    };
})();

JSFiddle

EDIT:

The variable current stores the index of the active accordion element. It is used to keep track of which element is currently active and avoid removing classes unnecessarily. The value of current ranges from 0 to the length of the accordion elements. An inactive element is indicated by a value outside this range, typically -1.

This approach allows us to only remove the active class from one element at a time when another element is clicked. By checking if the clicked element is not already active, we prevent adding and immediately removing the active class during toggling operations.

Switch between Accordions/Tabs with JavaScript (ES6)

Answer №1

Similar questions

What is the reason for adding CSS styles to a JavaScript file without importing them?

Guide on retrieving just the time from an ISO date format using JavaScript

Designing a calendar with a grid template

Is there a clash between the jQuery slider moving up and down and the Twitter widget

How can I create spacing between squares in an HTML div element?

Tips for concealing an alert using an 'if' statement

Utilizing AngularJS ng-messages feature across various languages

Utilizing AngularJS to implement checkbox selection within a table

Locate a row in an unselected data table using Jquery based on the value in a td

switch from material ui lists on/off

There are various iterations of html2canvas available

Necessary within a JavaScript Class

What is the best way to create a never-ending horizontal animation that moves a logo image from right

Undefined jQuery was encountered on the object when using the appropriate selector

Can you suggest a method to align this form to the center?

Combine and blur multiple background images using CSS blending techniques

Vertical scroll bar positioned on the left side of a DIV

Combining and adding together numerous objects within an array using JavaScript

Creating a duplicate of a Flex object in HTML without the need to reinitialize

Utilize Vue.js to send bound data to a click event