I have three separate toggle buttons, each supposed to show or hide its own section.
Example:
- Toggle 1 →
.section__one - Toggle 2 →
.section__two - Toggle 3 →
.section__three
Each toggle is configured as follows:
- CSS selector:
.section__xyz - Attribute:
class - Value:
brx-hidden(a class with »display none in it«)
Sections are initially visible and should be toggled via a simple display: none.
Problem
When I click one toggle, it works and hides or shows the corresponding section.
However, the other toggles stop responding unless I click the first one again.
It’s as if only one toggle interaction is allowed to be active at a time. They seem to block each other.
What I’ve already ruled out:
- Toggle buttons are not inside the sections they toggle
- CSS selectors are unique and specific
Question
How can I make each toggle work independently, so that users can open and close any section at any time without interference?
Thanks in advance,
André
