打开另一个标签页后，关闭按钮和标签页空间

Question

我有3个标签，我希望在打开其中1个标签时将其关闭。到目前为止，我已经使用了JQuery，以至于当我打开选项卡2时，选项卡1的内容都消失了。但是，选项卡本身不会关闭，内容所在的空间也保持打开状态。

我该如何解决按钮也关闭的代码，并随之消失空白？这是小提琴：https://jsfiddle.net/rxfzdnoa/

下面是代码：

jQuery：

    $('.collapsible-trigger').on('click', function() {

      var x = $("button").attr("aria-expanded", "true")
      var x = $('.collapsible-content--all').hasClass('is-open');
      if (x) {
        $("button").removeAttr('true');
        $('.collapsible-content--all').removeClass('is-open');
        $(this).removeAttr('true', 400);
        $(this).next().toggleClass('is-open', 400);
      } else {
        console.log("x");
        $('.true').setAttr("true");
        $('.collapsible-content--all').showClass('is-open');
      }

    });

HTML：

<div class="collapsibles-wrapper collapsibles-wrapper--border-bottom">
  <button type="button" class="label collapsible-trigger collapsible-trigger-btn collapsible-trigger-btn--borders collapsible--auto-height is-open" aria-controls="TITLE1" aria-expanded="true">
    TITLE1
    <span class="collapsible-trigger__icon collapsible-trigger__icon--open" role="presentation">
      <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon--wide icon-chevron-down" viewBox="0 0 28 16">
        <path d="M1.57 1.59l12.76 12.77L27.1 1.59" stroke-width="2" stroke="#000" fill="none" fill-rule="evenodd"></path>
      </svg>
    </span>

  </button>

  <div id="TITLE1" class="collapsible-content collapsible-content--all is-open" style="height: auto;">
    <div class="collapsible-content__inner rte">
      HELLO 1
    </div>
  </div>


  <button type="button" class="label collapsible-trigger collapsible-trigger-btn collapsible-trigger-btn--borders collapsible--auto-height is-open" aria-controls="TITLE2" aria-expanded="true">
    TITLE2
    <span class="collapsible-trigger__icon collapsible-trigger__icon--open" role="presentation">
      <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon--wide icon-chevron-down" viewBox="0 0 28 16">
        <path d="M1.57 1.59l12.76 12.77L27.1 1.59" stroke-width="2" stroke="#000" fill="none" fill-rule="evenodd"></path>
      </svg>
    </span>

  </button>

  <div id="TITLE2" class="collapsible-content collapsible-content--all is-open" style="height: auto;">
    <div class="collapsible-content__inner rte">
      HELLO 2
    </div>
  </div>




  <button type="button" class="label collapsible-trigger collapsible-trigger-btn collapsible-trigger-btn--borders collapsible--auto-height is-open" aria-controls="TITLE3" aria-expanded="true">
    TITLE3
    <span class="collapsible-trigger__icon collapsible-trigger__icon--open" role="presentation">
      <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon--wide icon-chevron-down" viewBox="0 0 28 16">
        <path d="M1.57 1.59l12.76 12.77L27.1 1.59" stroke-width="2" stroke="#000" fill="none" fill-rule="evenodd"></path>
      </svg>
    </span>

  </button>

  <div id="TITLE3" class="collapsible-content collapsible-content--all is-open" style="height: auto;">
    <div class="collapsible-content__inner rte">
      HELLO 3
    </div>
  </div>

和CSS：

/*================ Collapsible trigger ================*/

.collapsible-trigger-btn {
  text-align: left !important;
  @include baseTextCenter;
  @include accentFontStack;
  @include accentFontSmallSize;
  padding-left: 0px !important;
  display: block;
  width: 100%;
  padding: ($gutter / 1.75) 0;

  @include media-query($small) {
    padding: ($gutter / 2) 0;
  }
}

.collapsible-trigger-btn--borders {
  border: 1px solid $colorBorder;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  padding: 12px;
  border-color: #343434 !important;
  padding-bottom: 0px !important;
  font-size: 13px;
  letter-spacing: normal;
  font-weight: 600;

  @include media-query($small) {
    font-size: 12px;
  }

  .collapsible-trigger__icon {
    right: 12px;
  }

  @include media-query($medium-up) {
    padding: 15px;

    .collapsible-trigger__icon {
      right: 15px;
    }
  }

  .collapsible-content+& {
    margin-top: -1px;
  }

  +.collapsible-content .collapsible-content__inner {
    @include baseExtraSmallFontStack;
    border: 0px solid $colorBorder;
    border-top: 0;
    padding: 15px 0px 10px 0px;

    @include media-query($medium-up) {
      @include baseSmallFontStack;
      font-size: 13px;
      line-height: 1.5;
    }

    @include media-query($small) {
      font-size: 12px;
      line-height: 1.5;
    }
  }

  +.collapsible-content--expanded {
    margin-bottom: $gutter;

    &:last-child {
      margin-bottom: -1px;
    }
  }
}

.collapsible-trigger-btn--borders-top {
  border-top: 1px solid $colorBorder;
}

请注意，我已绑定到此HTML，因此不能更改结构。任何指导将不胜感激。谢谢。