AnsweredAssumed Answered

Calcite Maps: Accordion not working

Question asked by mshukun1 on Apr 24, 2017
Latest reply on Sep 6, 2018 by rhughes522

I am trying to use "accordion" using Calcite Maps bootstrap (jQuery version).  I took a code from this link and used in my HTML file, but it didn't work for some reasons.  I am not sure the problem is because of how I implemented the accordion code or something else.  Either the case, are there any ways to make the accordion to work? I would very much appreciate your help.

 

Here is the video for the problem: calcite-maps-accordion and below is the code I used in the application.

.areaInfo-accordion {
    margin-top: 80px;
    margin-left: 200px;
    height: 700px;
    width: 27%;
    overflow: auto;
    display: none;
    float: left;
    z-index: 2;
}
<div id="areaInfoA" class="areaInfo-accordion">
    <aside class="js-accordion accordion">
  <div class="accordion-section is-active">
    <h4 class="accordion-title">
      <span class="accordion-icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon"><path d="M28 9v5L16 26 4 14V9l12 12L28 9z"/></svg>
      </span>
      Title of Section
    </h4>
    <div class="accordion-content">
      <p>Stuff!</p>
    </div>
  </div>
  <div class="accordion-section">
    <h4 class="accordion-title">
      <span class="accordion-icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon"><path d="M28 9v5L16 26 4 14V9l12 12L28 9z"/></svg>
      </span>
      Title of Second Section
    </h4>
    <div class="accordion-content">
      <p>Stuff!</p>
    </div>
  </div>
  <div class="accordion-section">
    <h4 class="accordion-title">
      <span class="accordion-icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon"><path d="M28 9v5L16 26 4 14V9l12 12L28 9z"/></svg>
      </span>
      Title of Third Section
    </h4>
    <div class="accordion-content">
      <p>Stuff!</p>
    </div>
  </div>
</aside>
</div>

Outcomes