I have been using an accordion for some time very successfully.
But the panels contained nothing but text and now I have to allow for active elements (anchors ) in the panels.
Problem is that when a panel closes it's anchors stay active so you can't see them but you can click on them (and also only the first 2 or 3 panels will open up when the button is clicked and sometimes a panel will open once but not again - I guess all results of the same bug)
Is there a simple fix for this please?
Here's the script I've been using
```
<script>
var acc = document.getElementsByClassName("accordion");
var panel = document.getElementsByClassName('panel');
for (var i = 0; i < acc.length; i++) {
acc.onclick = function() {
var setClasses = !this.classList.contains('active');
setClass(acc, 'active', 'remove');
setClass(panel, 'show', 'remove');
if (setClasses) {
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
}
function setClass(els, className, fnName) {
for (var i = 0; i < els.length; i++) {
els.classList[fnName](className);
}
}
</script>
```
The attached file shows the problems. It has unique class names to allow for nesting.
P.S The text in the panels will be written by other people so I have to accept and handle 'anything' in the panel so a fix which calls for special coding of the anchors will be hard to accept.
Explanation: I'm writing an accordion database which holds the users' button text and panel text and generates accordion HTML on demand.
Bill Spence,
Dunfermline, Scotland
But the panels contained nothing but text and now I have to allow for active elements (anchors ) in the panels.
Problem is that when a panel closes it's anchors stay active so you can't see them but you can click on them (and also only the first 2 or 3 panels will open up when the button is clicked and sometimes a panel will open once but not again - I guess all results of the same bug)
Is there a simple fix for this please?
Here's the script I've been using
```
<script>
var acc = document.getElementsByClassName("accordion");
var panel = document.getElementsByClassName('panel');
for (var i = 0; i < acc.length; i++) {
acc.onclick = function() {
var setClasses = !this.classList.contains('active');
setClass(acc, 'active', 'remove');
setClass(panel, 'show', 'remove');
if (setClasses) {
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
}
function setClass(els, className, fnName) {
for (var i = 0; i < els.length; i++) {
els.classList[fnName](className);
}
}
</script>
```
The attached file shows the problems. It has unique class names to allow for nesting.
P.S The text in the panels will be written by other people so I have to accept and handle 'anything' in the panel so a fix which calls for special coding of the anchors will be hard to accept.
Explanation: I'm writing an accordion database which holds the users' button text and panel text and generates accordion HTML on demand.
Bill Spence,
Dunfermline, Scotland