Accordion - Anchors in panels causing problems 1

[bs6600]

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

 

[feherke]

Hi

Problem is that when a panel closes it's anchors stay active so you can't see them but you can click on them

Actually not just stays active after close, they were already active before opening the panels too. That is the normal behavior to expect when you only lower the opacity to 0.

To properly hide some elements usually their [tt]display[/tt] property is manipulated. But as that would affect your accordion's transition effect, better manipulate [tt]visibility[/tt] beside the [tt]opacity[/tt] :

div.P__5U80VNW71 {
    width:130%;
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    width:130%
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
    [highlight]visibility: hidden;[/highlight]
}

div.P__5U80VNW71.show {
    opacity: 1;
    [highlight]visibility: visible;[/highlight]
    max-height: none;
    max width: none;
    overflow-y: scroll;
}

Feherke.
feherke.github.io

 

[bs6600]

Fixed! Brilliant!
Thank You Feherke

Bill Spence,
Dunfermline, Scotland

 

[bs6600]

I'm not sure of the protocol so I've copied this as a new topic as well

May I ask a second (maybe related) question?
I now want to nest an accordion but this happens
Accordion A
Button A1 text only - OK
Button A2 text only - OK
Button A3 Opens Accotdion B

Button B1 text only - OK
Button B2 text only - OK
Button A4 text only - closes Button A3!!!!
​

I've checked all my tags are completed and I've given unique ids to everything.
My test file is linked below




Bill Spence,
Dunfermline, Scotland

 

[feherke]

Hi

Quite hard to follow that tag soup. And I do not really understand your sketch either, as I would expect :

[pre]
Button A1 text only
Button A2 text only
Button A3 contains Accordion B

Button B1 text only
Button B2 text only

Button A4 text only
[/pre]

Anyway, [tt]<div id="D__5UB16XN9A1020" class="P__5UB16XN9A">[/tt] does not seem to be closed. If I close it right before [tt]<button class="A__5UB16XN9A">[/tt] then works as I expect.

( BTW, personally I prefer this 2[sup]nd[/sup] question discussed here, as the context is pretty unique due to the handmade accordion. In case of moving the discussion to the new thread, you can refer to this one as show below the thread subject : thread216-1804542 . This way you provide context for the new readers. )


Feherke.
feherke.github.io

 

[bs6600]

Feherke,
Once again thank you - should have spotted that myself.
I have not got a formatting or syntax checking tool for html - I just use Notepad as my editor - do you know of a (free) tool which would have found any unclosed tags?

You were quite correct in your expectation - I had intended that my exclamation marks would show the error.

You might like to know that I generate my tag-soup from a database of pages and panels which I hope will make it easier for non coders to use accordions. One of it's facilities is to recover the database from the generated code so I put in comments to identify start and end of buttons, panels etc.

When my generator is reliable I'll clean up the generated code - promise.

Thanks again - you have saved an old programmer a lot of heart ache!

PS I'm going to post another question now - but asking for help in debugging my code. I'll try to link it to this (this to it?)



Bill Spence,
Dunfermline, Scotland

 

[feherke]

Hi

Well, there would be the W3C Markup Validation Service at

https://validator.w3.org/,

but unfortunately that will report all existing issues it finds and you will have to fix a lot of other errors until will reach the unclosed tag problem.

So I just commented out all your CSS and added only this :

* { background: #f003; margin: 3px 30px; }

This made it easier to notice that the 4[sup]th[/sup] button + panel pair is one level deeper than the others, so probably some tag was either not closed, or closed after them while should be closed before them.

Feherke.
feherke.github.io