I was hoping someone may be able to help me. I’m creating a cotainer that will store a lot of accordian content, almost sixty in total. At the moment when I open one accordian, it overlaps what is beneath, whereas I would rather all the below content will push down to accommodate the pane that is open when you click the accordian and it opens.
Would anyone maybe able to advise me what I’m doing wrong here?
You can try setting your ‘Dropdown List’ to position: static and give it a Min Width of 75VW to match the toggle. This should fix the overlapping issue.
You’ve also got a ‘Dropdown Toggle’ link block within each accordian which is adding some extra padding so I’d suggest removing this link or assigning a new class/combo class (so you don’t affect the main dropdown toggle) and adjusting the padding.
My apologies for my late reply, I’m just getting to try this out now. Thanks a million for looking into this, and the result of what you did in your example is exactly what I’m trying to achieve. However when I have the Dropdown list to static with the min width 75VW, it kind of pushes the dropdown content off to the right, if you check out the read only link above you’ll see what I mean. It also pushes the icon up, which looks kinda weird.
Would you mind having another look and see if I’m missing anything obvious, and I apologise in advance if I have.
I have to create 60 of these on this page, so I’m hoping once I get one right I can just copy and paste the same elements and change the content.