Nested Accordions Issue

[soumikpaul16]

While using Nested accordions like:

---accordion A

--accordion A.1 --accordion A.2 --accordion A.3

--accordion B

--accordion B.1 --accordion B.2

If I am trying to open accordion A.1 after opening accordion A i.e the parent accordion. The height of the content of accordion A "the parent accordion" is not getting recalculated.

Resulting the content of Accordion A.1 to overflow out of the accordion A content's allocated height. Which is breaking the view.

So the question is: Is it feasible to nest the accordions using Handorgel?

• If No: Fine.
• If Yes: How to solve this issue?

[oncode]

After A is opened, A fold should get height: auto. So it shouldn't be an issue when content of A is changing. Do you have a repo or codepen to reproduce?

[soumikpaul16]

After A is opened, A fold should get height: auto. So it shouldn't be an issue when content of A is changing. Do you have a repo or codepen to reproduce?

I can see the element id as "handorgel2-fold2-content" and there is a inline style which is getting added i.e height: {variable height}px;

The variable height is getting changed only if i click on the accordion. No custom code is been added.

Also Not able to see the height: auto property.

I will add a Codepen ASAP and will get back to you with the exact issue reference.

[fritzmg]

@soumikpaul16 do you have a Codepen ready? I made a quick test and could not detect any issues with nested accordions, at least not with Handorgel's default CSS: https://codepen.io/fritzmg/pen/qBvQZbb (without any CSS the behavior is janky, yes).

[fritzmg]

One thing that does indeed not work however is the usage of multiSelectable: false when there are nested accordions. A click on the toggler of one of the inner accordions will also close every other accordion, including the other ones: https://codepen.io/fritzmg/pen/QWoJKbp