Accordion Tabs

tabs.coffee

ACTIVE_CLASS = 'js-is-active'
$tabs = $("[data-role='tab']")
$toggles = $tabs.find("[data-role='link']")

$toggles.on 'click', (event) ->
  event.preventDefault()
  $toggle = $(@)
  $tab = $toggle.closest($tabs)
  unless $tab.hasClass(ACTIVE_CLASS)
    $tabs.removeClass(ACTIVE_CLASS)
    $tab.addClass(ACTIVE_CLASS)

tabs.html

  <ul class="accordion-tabs">
    <li class="tab js-is-active" data-role="tab">
      <a href="#" class="tab-link" data-role="link">Tab 1</a>
      <section>
        <div class="content">
        </div>
      </section>
    </li>
    <li class="tab" data-role="tab">
      <a href="#" class="tab-link" data-role="link">Tab 2</a>
      <section>
        <div class="content">
        </div>
      </section>
    </li>
    <li class="tab" data-role="tab">
      <a href="#" class="tab-link" data-role="link">Tab 3</a>
      <section>
        <div class="content">
        </div>
      </section>
    </li>
  </ul>

tabs.scss

.accordion-tabs {
  @include clearfix;
  border-radius: $base-border-radius;
  border: $tab-border;
  margin-bottom: $base-line-height;

  @include media($tab-mode) {
    border: none;
  }

  .tab {
    @include media($tab-mode) {
      display: inline;
    }

    &:first-child .tab-link {
      border-top-left-radius: $base-border-radius;
      border-top-right-radius: $base-border-radius;
    }

    &:last-child .tab-link {
      border-bottom-left-radius: $base-border-radius;
      border-bottom-right-radius: $base-border-radius;

      @include media($tab-mode) {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }
    }

    .tab-link {
      background-color: transparent;
      border: 1px solid gray-with-lightness(.8);
      color: $dark-gray;
      display: block;
      font-weight: bold;
      padding: $base-line-height/2 $gutter/2;
      text-align: center;

      @include media($tab-mode) {
        @include inline-block;
        border-bottom: 0;
        border-top-right-radius: $base-border-radius;
        border-top-left-radius: $base-border-radius;
      }

      &:hover {
        color: $base-link-color;
      }

      &:focus {
        outline: none;
      }
    }

    section {
      padding: $base-line-height $gutter;
      background: $tab-content-background;
      display: none;
      overflow: hidden;
      width: 100%;

      @include media($tab-mode) {
        border-bottom-left-radius: $base-border-radius;
        border-bottom-right-radius: $base-border-radius;
        border: $tab-border;
        float: left;
        left: 0;
        padding: $base-line-height/2 $gutter/2;
      }
    }

    &.js-is-active {
      .tab-link {
        background-color: $tab-active-background;
        border-bottom: 0;

        @include media($tab-mode) {
          background-color: $tab-active-background;
          border: $tab-border;
          border-bottom: 1px solid $tab-active-background;
          margin-bottom: -1px;
        }
      }

      section {
        display: block;

        .content {
          //  Animate content
        }
      }
    }
  }
}