How to get correct accordion panel function in ArcGIS Hub site?

Question

Hello all, I am trying to incorporate 4 single-panel accordion elements in a Hub site that I'm currently developing. I've got it working based on this thread noted in the source comment below. I'm not a Javascript person, so I need some help. I've repeated this code for all 4 panels, changing the panel element names, but right now, only the top panel is collapsed when the page loads. What do I need to change in order for all 4 individual panels to be collapsed on page-load? Thanks in advance for any help or suggestions! Catherine

Safety Measures

text here Click to learn more

Back to Top

Gabrielle · Answer

Catherine- I am trying to do the same thing and I am NOT a coder. I ran into the same problems you did. Is there any way you could share the final code that worked so I can see what I am doing wrong? '

Thank you!

Gabrielle

CatherineTulley · Answer

This is all good info! Esp. re: Bootstrap 3 vs. 4...I think the samples that I was trying to use were for version 4. I will also try out the iframe card and see if that makes any difference on the other site. Thanks for the reply.

Anonymous User · Answer

Sorry I misunderstood! I didn't realize you had already tried that or that you were trying to use custom HTML across text cards. I can see why that would be frustrating. A few clarifying points that may help you (or others) in the future:

* calcite web is a version of bootstrap with the calcite theme applied to it. I would expect some differences if you tried to use this calcite bootstrap library in conjunction with another library as they may be built for different purposes. if you are trying to do something and need total control, the iframe card is a great failsafe--you can run anything you want within the iframe as it'll act as its own browser tab within your site.
* calcite bootstrap is on bootstrap 3, not bootstrap 4. we're looking into the upgrade but haven't yet slated it for a release this year as it could be fairly disruptive. it's on our list, though
* we don't give access to hub's centralized CSS resource and I realize that can lead to some frustration. However, if we did this there would be several opportunities to "brick your site" (to use the phone analogy)...if you saved CSS that made it impossible to use the editor UI then it would be very hard for us to support you. if there is a specific _reason_ you want access to the central CSS resource we can take that into consideration and expose additional controls. For example, we recently added a row class name configuration to row cards to assist in CSS targeting. If you have specific requests that editing a global CSS resource would solve, please let us know what they are as there are other possible solutions that may not have the nasty side effect of potentially bricking your site!