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
```
<!-- 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
<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>
<img src="/sandbox/images/safety_sm.png">
</p>
<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>
```