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

CatherineTulley · ‎12-05-2019

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

<div id="panelSafety" class="panel collapse in">
<div id="headingSafety" class="panel-heading" role="tab">
<div class="panel-title">
<a class="panel-toggle collapsed" role="button" data-toggle="collapse" href="#collapseSafety" aria-expanded="false" aria-controls="collapseSafety"></a><div style="background: rgba(41,43,71,1.0); color: #fff; padding: 5px; height: 65px;"><a class="panel-toggle collapsed" role="button" data-toggle="collapse" href="#collapseSafety" aria-expanded="false" aria-controls="collapseSafety">
<h5>Safety Measures<br></h5><span class="glyphicon glyphicon-info-search" aria-hidden="true"></span></a>
<a class="panel-close" role="button" data-toggle="collapse" data-target="#panelSafety"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a>
</div>
</div>
<div id="collapseSafety" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSafety" aria-expanded="false" style="height: 0px;">
<div class="panel-body calcite-body-expander">
<div class="panel-body">

<p>
<img src="/sandbox/images/safety_sm.png">
</p>

<p></p><p><strong>text here</h6>

<a href="https://community.esri.com/pages/safety" class="btn btn-primary">Click to learn more</a><p></p>

<a href="#BackToTop">Back to Top</a><p></p>
</div>
</div>
</div>
</div></div>

CatherineTulley · ‎12-18-2019

Graham Hudgins‌ Is there anyone at ESRI who can help us get this working?

Anonymous User · ‎12-18-2019

These panels work by targeting the class names. So if you use `panelSafety` in all 4 then you'll run into issues. You need to give each panel its own name and wire up the close actions too. You can also wire up a "parent" so that the other close when you open a new one. I recommend googling "bootstrap accordion" or "bootstrap collapse" as there is a wealth of examples

i've improved your example a small amount but didn't put the parent on so they both stay open

```

<div id="panelSafety" class="panel collapse in">
<div id="headingSafety" class="panel-heading" role="tab">
<div class="panel-title">
<a class="panel-toggle collapsed" role="button" data-toggle="collapse" href="#collapseSafety" aria-expanded="false" aria-controls="collapseSafety"></a><div style="background: rgba(41,43,71,1.0); color: #fff; padding: 5px; height: 65px;"><a class="panel-toggle collapsed" role="button" data-toggle="collapse" href="#collapseSafety" aria-expanded="false" aria-controls="collapseSafety">
<h5>Safety Measures<br></h5><span class="glyphicon glyphicon-info-search" aria-hidden="true"></span></a>
<a class="panel-close" role="button" data-toggle="collapse" data-target="#panelSafety"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a>
</div>
</div>
<div id="collapseSafety" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSafety" aria-expanded="false" style="height: 0px;">

<div class="panel-body calcite-body-expander">

<div class="panel-body">

<p></p><p><strong>text here

<a href="https://community.esri.com/pages/safety" class="btn btn-primary">Click to learn more</a></strong></p><p></p><strong>

<a href="#BackToTop">Back to Top</a><p></p>
</strong></div><strong>
</strong></div><strong>
</strong></div><strong>
</strong>
</div>
</div>
<div id="panelOther" class="panel collapse in">
<div id="headingOther" class="panel-heading" role="tab">
<div class="panel-title">
<a class="panel-toggle collapsed" role="button" data-toggle="collapse" href="#collapseOther" aria-expanded="false" aria-controls="collapseOther"></a><div style="background: rgba(41,43,71,1.0); color: #fff; padding: 5px; height: 65px;"><a class="panel-toggle collapsed" role="button" data-toggle="collapse" href="#collapseOther" aria-expanded="false" aria-controls="collapseOther">
<h5>Safety Measures<br></h5><span class="glyphicon glyphicon-info-search" aria-hidden="true"></span></a>
<a class="panel-close" role="button" data-toggle="collapse" data-target="#panelOther"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a>
</div>
</div>
<div id="collapseOther" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOther" aria-expanded="false" style="height: 0px;">

<div class="panel-body calcite-body-expander">

<div class="panel-body">

<p></p><p><strong>text here

<a href="https://community.esri.com/pages/safety" class="btn btn-primary">Click to learn more</a></strong></p><p></p><strong>

```

CatherineTulley · ‎01-09-2020

Hi Graham, thanks for your reply, but as I mentioned, I had already changed the panel element names for all 4....that wasn't the problem. I was eventually able to get this working with the help of our web admin. We'd spent a good bit of time on googling code samples from multiple sites, including ESRI code samples. Samples from calcite-web and calcite-maps didn't always work together. Samples from a straight Bootstrap 4 example would not work in the Hub text box object. Either the panels would only render as plain text, or or the panels would render but without the accordion function.

We did eventually get this to work. Part of my issue was that I had assumed each panel had to be in its own individual text box object. I switched it so that all 4 accordion panels were in a single text box object. I had to close each working panel in its individual text box, then copy the closed panel & paste it into the "shared" text box object. It finally worked. Once all 4 panels were working correctly as a single unit, I tried copying the identical code in into a different Hub site that we're building, but now the panels do NOT work. It's just been frustrating trying to get some of these elements to behave correctly.

It would be really helpful if we could get access to the parent CSS file behind the Hub sites...I think that would resolve some of these issues we've experienced. Hope this helps someone else trying to get this to work.

Anonymous User · ‎01-09-2020

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!

CatherineTulley · ‎01-17-2020

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.

GabrielleFausel · ‎03-30-2022

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