Tabs that Convert to Accordions on Mobile

<div class="container remove-blank my-3">
  <div class="tabsToAccordion">
    <ul id="tabs" class="nav nav-tabs nav-fill d-md-flex flex-md-nowrap" role="tablist">
      <li class="remove-blank nav-item" role="presentation">
        <div id="tabTitle1" data-toggle="tab" data-target="#tab1" tabindex="0" aria-controls="tab1" class="nav-link nav-item active" role="tab" aria-selected="true">
          <div data-content-block="tab1title" data-content="content" data-editable="editable">
            {{#page.tab1title}}
                {{& content}}
              {{/page.tab1title}}
              <!-- @if NODE_ENV!='production' -->
                  tab title content
              <!-- @endif -->
          </div>
        </div>
      </li>
      <!-- add more tabs as needed, make sure it matches the number of accordions -->
    </ul>
    <div id="accordion" class="tab-content" role="tablist">
      <div id="tab1" class="card tab-pane fade show active" role="tabpanel" aria-labelledby="tabTitle1">
        <div role="button" id="card1Name" class="card-header" data-toggle="collapse" data-target="#collapse1" tabindex="0" aria-controls="collapse1" aria-expanded="true">
          <div data-content-block="tab1titledupe" data-content="content" data-editable="editable" class="content">
            {{#page.tab1titledupe}}
              {{& content}}
            {{/page.tab1titledupe}}
            <!-- @if NODE_ENV!='production' -->
                tab title content (dupe)
            <!-- @endif -->
          </div>
          <span class="arrow-square" aria-hidden="true"></span>
        </div>
        <div id="collapse1" class="collapse show" data-parent="#accordion" aria-labelledby="card1Name">
          <div class="card-body content">
            <div data-content-block="tab1content" data-content="content" data-editable="editable" >
              {{#page.tab1content}}
                {{& content}}
              {{/page.tab1content}}
              <!-- @if NODE_ENV!='production' -->
                  inside of tab/accordion 1
              <!-- @endif -->
            </div>
          </div>
        </div>
      </div>
   	  <!-- add more accordions as needed, make sure it matches the number of tabs -->
    </div>
  </div>
</div>

.tabsToAccordion {
  .card {
    border: 0;
    // ≤ 767px
    @include media-breakpoint-down(sm) {
    	padding: 0;
    	opacity: 1;
    	display: block;
    }
    &-header {
      cursor: pointer;
      @extend h2;
      padding-left: 0;
      position: relative;
      background-color: transparent;
      display: block;
      // ≥ 768px
      @include media-breakpoint-up(md) {
        display: none;
      }
      .arrow-square {
        position: absolute;
        right: 0;
        bottom: -1px;
        width: 32px;
        height: 32px;
        transition: all .2s ease-in-out;
        text-align: center;
        &:before {
          content: '';
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 4px 4px 0 4px;
          transition: all .2s ease-in-out;
          position: absolute;
          top: 50%;
          transform: translate(0,-50%);
          right: 0;
          left: 0;
          margin: 0 auto;
        }
      }
      &[aria-expanded="false"] .arrow-square {
        background-color: $brand-gold;
        &:before {
          border-color: $body-color transparent transparent transparent;
        }
      }
      &[aria-expanded="true"] .arrow-square {
        background-color: $brand-blue-light;
        &:before {
          border-color: $white transparent transparent transparent;
          transform: rotate(180deg);
          top: 45%;
        }
      }
      &:hover,&:focus {
        text-decoration: underline;
        .arrow-square {
          background-color: darken($brand-gold,15%);
        }
      }
    }
    &-body {
    	padding: 20px 0;
    	// ≥ 768px
    	@include media-breakpoint-up(md) {
      		padding: 0;
      	}
    }
  }
  .nav-tabs {
  	// ≤ 767px
  	@include media-breakpoint-down(sm) {
  		display: none;
  	}
  }
  .tab-content > .tab-pane {
  	// ≤ 767px
  	@include media-breakpoint-down(sm) {
  		display: block;
  	}
  }
  .collapse {
  	// ≥ 768px
  	@include media-breakpoint-up(md) {
        display: block;
    }
    &.show {
	    // ≤ 767px
	    @include media-breakpoint-down(sm) {
	        display: block;
	    }
    }
  }
}