Interactive between accordion and sidebar item that is using often on FAQ page

[dev0912]

• Example url: B-glowing

• Sidebar menu item

  <div class="sidebar-list">
  <nav>
    <ul>
      {% for block in section.blocks %}
      <li><a href="#section-{{ block.id }}">{{ block.settings.heading | capitalize }}</a></li>
      {% endfor %}
    </ul>
  </nav>
  </div>

• Accordion Wrapper

  <div id="accordion--wrapper">
    {% if section.blocks.size > 0 %}
      {% for block in section.blocks %}
        <div id="section-{{ block.id }}" class="section--wrapper">
          {% for i in (1..15) %}
            {% assign title = 'title_' | append: i %}
            {% assign content = 'content_' | append: i %}
            {% assign rowId = block.id | append: '_' | append: i %}
            {% if block.settings[title] != blank and block.settings[content] != blank %}
            <div class="acc-item">
              <div class="head_tab">
                <label class="head-title">{{ block.settings[title] }}</label><div class="icon-collapse"><span class="ico-minus">{% include 'ico-minus' %}</span><span class="ico-plus">{% include 'ico-plus' %}</span></div>
              </div>
              <div class="panel">
                <p>{{ block.settings[content] }}</p>
              </div>
            </div>
            {% endif %}
          {% endfor %}
        </div>
      {% endfor %}
    {% endif %}
  </div>

• Script

  <script>
  jQuery(document).ready(function($){
  
  // Interactive scroll effect [Start]
  let mainNavLinks = document.querySelectorAll(".sidebar-list nav ul li a")
  let fromTop = window.scrollY;
  mainNavLinks.forEach(link => {
    let section = document.querySelector(link.hash)
  
    if (
      section.offsetTop <= fromTop &&
      section.offsetTop + section.offsetHeight > fromTop
    ) {
      link.classList.add("current")
    } else {
      link.classList.remove("current")
    }
  });
  
  window.addEventListener("scroll", event => {
    let fromTop = window.scrollY
    mainNavLinks.forEach(link => {
      let section = document.querySelector(link.hash)
  
      if (
        section.offsetTop <= fromTop &&
        section.offsetTop + section.offsetHeight > fromTop
      ) {
        link.classList.add("current")
      } else {
        link.classList.remove("current")
      }
    })
  })
  // Interactive scroll effect [END]
  
  // When click on side menu, scrolling to the corresponded section.
  jQuery('.sidebar-list').on('click', 'a', function(e){
    e.stopPropagation()
    e.preventDefault()
  
    var _this = $(this).attr('href')
      $('html, body').animate({ scrollTop: parseInt($(_this).offset().top) - 20}, 800) })
  
  // Accordion effect [START]
  var accordionWrapper = document.getElementById("accordion--wrapper")
  var acc = document.getElementsByClassName("head_tab")
  var i
  
  function fadeContent (panel) {
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  }
  
  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function(e) {
      if(this.classList.contains('active')) {
        this.classList.toggle("active")
        fadeContent(this.nextElementSibling)
      } else {
        var expandedPanel = accordionWrapper.querySelector(".active")
        if (expandedPanel){
          expandedPanel.classList.remove("active")
  
          fadeContent(expandedPanel.nextElementSibling)
        }
  
        this.classList.toggle("active")
        fadeContent(this.nextElementSibling)
      }
    })
  }
  // Accordion effect [END]
  
  })// document.ready end
  </script>

• Style

  .sidebar-list {
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  
    li {
      line-height: 0;
      margin-bottom: 30px;
  
      a {
        font-size: 14px;
        line-height: 19px;
        text-transform: uppercase;
  
        &.current {
          font-weight: bold;
        }
      }
    }
  }
  }
  .sidebar-list {
  max-width: 235px;
  width: 100%;
  position: fixed;
  z-index: -1;
  }
  
  .section--wrapper {
  &:first-child {
    .acc-item:first-child {
      border-top: 1px solid #dcdcdc;
    }
  }
  }
  .content-wrap {
  width: 100%;
  max-width: calc(100% - 235px);
  min-height: 550px;
  margin-left: 235px;
  }
  .acc-item {
  border-bottom: 1px solid #dcdcdc;
  padding: 0 115px;
  
  .head_tab {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 30px 0;
    transition: 0.4s;
    cursor: pointer;
  
    &.active {
      .icon-collapse {
        .ico-minus {
          display: none;
        }
        .ico-plus {
          display: flex;
        }
      }
    }
  }
  
  .head-title {
    font-size: 24px;
    line-height: 27px;
    letter-spacing: .71px;
    text-transform: initial;
    margin: 0;
  }
  
  .icon-collapse {
    .ico-minus {
      display: flex;
    }
    .ico-plus {
      display: none;
    }
  }
  
  .panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
  
    p {
      max-width: 670px;
      width: 100%;
      margin-bottom: 50px;
      font-size: 16px;     
      line-height: 24px;
    }
  }
  }