Two accordions on one page

Custom code
1

Created an accordion using the code posted on the Readymag website. Everything worked. Added another, on the same page, and it no longer works. Is it possible to have 2 accordions on one page? Maybe something needs to change in the code?

1 Like
2

Hi @annakreshchenko welcome to the ReadyMag forum. Have you tried turning on this button, otherwise it will probably conflict due to it sharing same HTML ID and Class names. :slight_smile:

Screenshot 2022-06-11 at 14.41.56

1 Like
3

if the trick from @HEADLESS.HORSE isnt doing it. you could manually change the classnames/variabled in the accordeon code and evade the naming conflict, which errors the execution of the code.

2 Likes
4

Thank you very much for the answer!

1 Like
5

Thanks it helped, have a nice day

1 Like
6

Hi @neueMeta & @HEADLESS.HORSE! I changed the classnames, which allowed me to have two accordions on one page, but now the first accordion won’t “close.” Once the panel is opened, it stays open. Any tips on how to adjust the script? Much appreciated!

7

Hi @designbyellie is it possible to paste the code in the forum here? We can then review it for you.

8

@HEADLESS.HORSE thanks for the quick reply! I used your accordion code from the Readymag article but for the second accordion, I changed all instances of the word “accordion” to “dropdown.” This allowed me to have two accordions on one page. However, the first accordion (using the exact code you created with no changes) no longer “hides” the panels after they’ve been opened. Oddly, the second accordion with the “dropdown” code opens & closes just fine. I’m assuming this has something to do with the script at the end having the same commands for both accordions. Hope that clarifies things. I can paste the code here, but it is exactly as written in the Readymag article! Appreciate your help.

9

I have you tried turning one ‘use iFrame’ as per the previous reply?

10

I did & it does work, but I don’t love seeing the scroll bar on the accordion. Is there a way to hide that?

11

That’s great to hear. To your CSS add the following.

html {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

::-webkit-scrollbar {
  display: none;
}
12

Hmm unfortunately that didn’t work! Scroll bar still shows.

13

Hi. Did you find a solution to the problem?

14

@HEADLESS.HORSE I am also having a similar issue, I have accordions on multiple pages, but when I click on a link to a page the accordion on the destination page won’t open. But then when I refresh it works. Any ideas? It works fine when i use iFrame, but then I seem to lose ability to change font etc.