你能链接到手风琴中的内容吗？

Question

我有一个使用手风琴结构构建的网站 - 因此所有部分都被分解为手风琴，每个部分内的部分都被分成手风琴。

所以结构是这样的：

Main section accordion
   Section accordion
      Content...
   Section accordion
      Content...
   Section accordion
      Content...
Main section accordion
   Section accordion
      Content...
   Section accordion
      Content...
   Section accordion
      Content...

我遇到的问题是网站内的链接。所以在一个页面上我有一个“有关更多信息，请参阅第xx节”。有没有办法链接到另一支手风琴中的手风琴内容？

这是手风琴代码：

$(function() {
  'use strict';
  $(".btnBlock button").click(function() {

    var btn = $(this);
    var toggle = btn.parent();
    var content = btn.parent().next();

    if (btn.attr('aria-expanded') === 'false') {
      // open
      $(content).slideDown();
      toggle.addClass('closeAccord');
      btn.attr('aria-expanded', 'true');
      content.attr('aria-hidden', 'false');
      $(btn).removeClass("showMore");
      $(btn).addClass("showLess");
      $(btn).text('SHOW LESS');

    } else {
      // close
      $(content).slideUp();
      toggle.removeClass('closeAccord');
      btn.attr('aria-expanded', 'false');
      content.attr('aria-hidden', 'true');
      $(btn).removeClass("showLess");
      $(btn).addClass("showMore");
      $(btn).text('DISCOVER MORE');
    }

  });
});

$(function() {
  'use strict';
  $(".contentBlockHeading button").click(function() {

    var btn = $(this);
    var toggle = btn.parent();
    var content = btn.parent().next();

    if (btn.attr('aria-expanded') === 'false') {
      // open
      $(content).slideDown();
      toggle.addClass('closeAccord');
      btn.attr('aria-expanded', 'true');
      content.attr('aria-hidden', 'false');
      $(btn).addClass("contentBtn");
      btn.find('span').text('SHOW LESS');
      btn.find('span').removeClass("cbh-showMore");
      btn.find('span').addClass("cbh-showLess");

    } else {
      // close
      $(content).slideUp();
      toggle.removeClass('closeAccord');
      btn.attr('aria-expanded', 'false');
      content.attr('aria-hidden', 'true');
      $(btn).removeClass("contentBtn");
      btn.find('span').text('DISCOVER MORE');
      btn.find('span').removeClass("cbh-showLess");
      btn.find('span').addClass("cbh-showMore");
    }

  });
});

.accordion-text {
  display: none;
  box-sizing: border-box;
  padding: 20px 20px 45px 20px;
  margin: 0 0 30px 0;
}

.border-thick {
  border-bottom: 10px solid #fec445;
}

.content-block {
  display: none;
  box-sizing: border-box;
  padding: 20px 20px 45px 20px;
  margin: 0 0 30px 0;
}

.content-block img {
  width: 100%;
  height: auto;
  display: block;
}

.contentBlockHeading button {
  box-sizing: border-box;
  padding: 20px 180px 15px 0;
  color: #000;
  background-color: #fff;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  text-decoration: none;
  display: block;
  cursor: pointer;
  width: 100%;
  text-align: left;
  position: relative;
  -webkit-transition: all .5s;
  / transition: all .5s;
}

.contentBlockHeading button:hover {
  background-color: #efefef;
  padding: 20px 200px 15px 20px;
}

.contentBtn {
  background-color: #efefef !important;
  padding: 20px 180px 15px 20px !important;
  box-sizing: border-box;
}

.contentBlockHeading h3 span,
.contentBlockHeading h2 span {
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 18px 18px;
  text-align: right;
  position: absolute;
  right: 0;
  padding: 0 0 0 25px;
  font-size: 14px;
  font-family: 'ABCSans-Light', Arial, "sans-serif";
  -webkit-transition: all .5s;
  / transition: all .5s;
}

.contentBlockHeading h3 button:hover span,
.contentBlockHeading h2 button:hover span {
  right: 15px;
}

.contentBlockHeading h3 button,
.contentBlockHeading h2 button {
  font-size: 23px;
  line-height: 27px;
  margin: 0;
  font-family: 'ABCSans-Bold', Arial, "sans-serif";
}

.contentBlockHeading h3,
.contentBlockHeading h2 {
  margin: 0;
}

.cbh-showMore {
  background-image: url(../images/icon_showMore.png);
}

.cbh-showLess {
  background-image: url(../images/icon_showLess.png);
  right: 15px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#section2content">I want to link to section two content</a>

<!-- CONTENT BLOCK -->
<div class="contentWrapper">
  <div class="sectionBlock-heading">
    <h2 id="abc-audiences">Main Section Headings</h2>
  </div>
  <div class="sectionBlock-wrapper">
    <div class="sectionBlock-left">
      <p>Some content here like this...<br /><br /><br /></p>
    </div>
  </div>

  <div class="btnBlock btn-sectionBlock">
    <button class="showMore" aria-controls="accord-1" aria-expanded="false">DISCOVER MORE</button>
  </div>
  <div class="accordion-text border-thick" aria-hidden="true" id="accord-1">

    <!-- TEXT SECTION -->
    <div class="headingList">
      <div class="contentBlockHeading">
        <h3>
          <button class="" aria-controls="accord-1a" aria-expanded="false">
								Section heading <span class="cbh-showMore" aria-hidden="true">DISCOVER MORE</span>
							</button>
        </h3>

        <div class="content-block" aria-hidden="true" id="accord-1a">
          <p>Content...</p>
        </div>
      </div>
    </div>
    <!-- END TEXT SECTION -->

    <!-- TEXT SECTION -->
    <div class="headingList">
      <div class="contentBlockHeading">
        <h3>
          <button class="" aria-controls="accord-1b" aria-expanded="false">
								Section heading <span class="cbh-showMore" aria-hidden="true">DISCOVER MORE</span>
							</button>
        </h3>
        <div class="content-block" aria-hidden="true" id="accord-1b">
          <p id="section2content">Content...</p>
        </div>
      </div>
    </div>
    <!-- END TEXT SECTION -->
  </div>
</div>