AnsweredAssumed Answered

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

Question asked by ctulley on Dec 5, 2019
Latest reply on Jan 17, 2020 by ctulley

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 Panel -->
<!-- Source: https://community.esri.com/thread/191483-calcite-map-opening-one-panel-from-another#comment-671513 -->
<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="/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>

Outcomes