Happening Now

See Communications Strip
<div class="happening-now">
    <div class="happening-now__inner">
        <div class="happening-now-head">
            <div class="happening-now-head-item">
                <a href="#" class="happening-now-control happening-now-control--news js-open" data-target="news">
                    <h3 class="happening-now-title">news</h3>

                    <div class="happening-now-open js-control" id="newsControl">
                        <i class="fa fa-plus"></i>
                    </div>
                </a>
                <div class="happening-now-item-initial">
                    <a href="#" class="happening-now-item">
                        <div class="happening-now-item__media">
                            <img src="/images/photos/0.jpg" alt="" class="happening-now-item__img img-responsive" />
                        </div>

                        <div class="happening-now-item__body">
                            <h4 class="happening-now-item__title">Lorem ipsum dolor sit amet, heal likenes consectetur adipiscing lit, sed doer eiusmod honor.</h4>
                        </div>
                    </a>
                    <a href="#" class="happening-now-item">
                        <div class="happening-now-item__media">
                            <img src="/images/photos/1.jpg" alt="" class="happening-now-item__img img-responsive" />
                        </div>

                        <div class="happening-now-item__body">
                            <h4 class="happening-now-item__title">Lorem ipsum dolor sit amet, heal likenes consectetur adipiscing lit, sed doer eiusmod honor.</h4>
                        </div>
                    </a>
                </div>
            </div>

            <div class="hidden-lg">
                <div class="happening-now-zone happening-now-zone--news js-section js-section--news" data-section="news">
                    <div class="happening-now-zone-items">
                        <a href="#" class="happening-now-item">
                            <div class="happening-now-item__media">
                                <img src="/images/photos/2.jpg" alt="" class="happening-now-item__img img-responsive" />
                            </div>

                            <div class="happening-now-item__body">
                                <h4 class="happening-now-item__title">Lorem ipsum dolor sit amet, heal likenes consectetur adipiscing lit, sed doer eiusmod honor.</h4>
                            </div>
                        </a>
                        <a href="#" class="happening-now-item">
                            <div class="happening-now-item__media">
                                <img src="/images/photos/3.jpg" alt="" class="happening-now-item__img img-responsive" />
                            </div>

                            <div class="happening-now-item__body">
                                <h4 class="happening-now-item__title">Lorem ipsum dolor sit amet, heal likenes consectetur adipiscing lit, sed doer eiusmod honor.</h4>
                            </div>
                        </a>
                        <a href="#" class="happening-now-item">
                            <div class="happening-now-item__media">
                                <img src="/images/photos/4.jpg" alt="" class="happening-now-item__img img-responsive" />
                            </div>

                            <div class="happening-now-item__body">
                                <h4 class="happening-now-item__title">Lorem ipsum dolor sit amet, heal likenes consectetur adipiscing lit, sed doer eiusmod honor.</h4>
                            </div>
                        </a>
                    </div>
                    <div class="happening-zone-actions">
                        <a href="" class="btn btn-link"
                            >See More
                            <i class="fa fa-long-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </div>

            <div class="happening-now-head-item">
                <a href="#" class="happening-now-control happening-now-control--announcements js-open" data-target="announcements">
                    <h3 class="happening-now-title">announcements</h3>

                    <div class="happening-now-open js-control" id="announcementsControl">
                        <i class="fa fa-plus"></i>
                    </div>
                </a>
                <div class="happening-now-item-initial">
                    <a href="#" class="happening-now-item">
                        <div class="happening-now-item__body">
                            <h4 class="happening-now-item__title">Lorem ipsum dolor sit amet, heal likenes consectetur adipiscing lit, sed doer eiusmod honor.</h4>
                        </div>
                    </a>
                    <a href="#" class="happening-now-item">
                        <div class="happening-now-item__body">
                            <h4 class="happening-now-item__title">Lorem ipsum dolor sit amet, heal likenes consectetur adipiscing lit, sed doer eiusmod honor.</h4>
                        </div>
                    </a>
                </div>
            </div>

            <div class="hidden-lg">
                <div class="happening-now-zone happening-now-zone--announcements js-section js-section--announcements" data-section="announcements">
                    <div class="happening-now-zone-items">
                        <a href="#" class="happening-now-item">
                            <div class="happening-now-item__body">
                                <h4 class="happening-now-item__title">Lorem ipsum dolor sit amet, heal likenes consectetur adipiscing lit, sed doer eiusmod honor.</h4>
                            </div>
                        </a>
                        <a href="#" class="happening-now-item">
                            <div class="happening-now-item__body">
                                <h4 class="happening-now-item__title">Lorem ipsum dolor sit amet, heal likenes consectetur adipiscing lit, sed doer eiusmod honor.</h4>
                            </div>
                        </a>
                        <a href="#" class="happening-now-item">
                            <div class="happening-now-item__body">
                                <h4 class="happening-now-item__title">Lorem ipsum dolor sit amet, heal likenes consectetur adipiscing lit, sed doer eiusmod honor.</h4>
                            </div>
                        </a>
                    </div>
                    <div class="happening-zone-actions">
                        <a href="" class="btn btn-link"
                            >See More
                            <i class="fa fa-long-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="visible-lg-block">
            <div class="happening-now-zone happening-now-zone--desktop happening-now-zone--news js-section js-section--news" data-section="news">
                <a href="" class="happening-now-close js-close">
                    <i class="fa fa-minus"></i>
                </a>
                <div class="happening-now-zone-items">
                    <a href="#" class="happening-now-item">
                        <div class="happening-now-item__media">
                            <img src="/images/photos/2.jpg" alt="" class="happening-now-item__img img-responsive" />
                        </div>

                        <div class="happening-now-item__body">
                            <h4 class="happening-now-item__title">Lorem ipsum dolor sit amet, heal likenes consectetur adipiscing lit, sed doer eiusmod honor.</h4>
                        </div>
                    </a>
                    <a href="#" class="happening-now-item">
                        <div class="happening-now-item__media">
                            <img src="/images/photos/3.jpg" alt="" class="happening-now-item__img img-responsive" />
                        </div>

                        <div class="happening-now-item__body">
                            <h4 class="happening-now-item__title">Lorem ipsum dolor sit amet, heal likenes consectetur adipiscing lit, sed doer eiusmod honor.</h4>
                        </div>
                    </a>
                    <a href="#" class="happening-now-item">
                        <div class="happening-now-item__media">
                            <img src="/images/photos/4.jpg" alt="" class="happening-now-item__img img-responsive" />
                        </div>

                        <div class="happening-now-item__body">
                            <h4 class="happening-now-item__title">Lorem ipsum dolor sit amet, heal likenes consectetur adipiscing lit, sed doer eiusmod honor.</h4>
                        </div>
                    </a>
                </div>
                <div class="happening-zone-actions">
                    <a href="" class="btn btn-link"
                        >See More
                        <i class="fa fa-long-arrow-right"></i>
                    </a>
                </div>
            </div>
        </div>

        <div class="visible-lg-block">
            <div class="happening-now-zone happening-now-zone--desktop happening-now-zone--announcements js-section js-section--announcements" data-section="announcements">
                <a href="" class="happening-now-close js-close">
                    <i class="fa fa-minus"></i>
                </a>
                <div class="happening-now-zone-items">
                    <a href="#" class="happening-now-item">
                        <div class="happening-now-item__body">
                            <h4 class="happening-now-item__title">Lorem ipsum dolor sit amet, heal likenes consectetur adipiscing lit, sed doer eiusmod honor.</h4>
                        </div>
                    </a>
                    <a href="#" class="happening-now-item">
                        <div class="happening-now-item__body">
                            <h4 class="happening-now-item__title">Lorem ipsum dolor sit amet, heal likenes consectetur adipiscing lit, sed doer eiusmod honor.</h4>
                        </div>
                    </a>
                    <a href="#" class="happening-now-item">
                        <div class="happening-now-item__body">
                            <h4 class="happening-now-item__title">Lorem ipsum dolor sit amet, heal likenes consectetur adipiscing lit, sed doer eiusmod honor.</h4>
                        </div>
                    </a>
                </div>
                <div class="happening-zone-actions">
                    <a href="" class="btn btn-link"
                        >See More
                        <i class="fa fa-long-arrow-right"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

.happening-now {
  padding-top: 2.4em;
  padding-bottom: 2.4em;

  &.happening-now--dark {
    background-color: $color-base-blue;
  }

  .happening-now__inner {
    max-width: 1170px;
    margin: 0 auto;
  }

  .happening-now-head {
    @media (min-width: $breakpoint-desktop) {
      display: flex;
    }
  }

  .happening-now-head-item {
    flex: 1;

    @media (min-width: $breakpoint-desktop) {
      margin: 0 0.8rem;

      &:first-child {
        margin-left: 0;
      }
      &:last-child {
        margin-right: 0;
      }
    }
  }

  .happening-now-control {
    position: relative;
    display: block;
    border-top: 4px solid $color-grey-dark;
    text-decoration: none;
    color: $color-base-blue;

    &:hover {
      color: $color-blue-medium;
    }

    &.happening-now-control--news {
      border-color: $color-blue-medium;
    }

    &.happening-now-control--announcements {
      border-color: $color-grey-medium;
    }

    &.happening-now-control--events {
      border-color: $color-blue-light;
    }
  }

  &.happening-now--dark .happening-now-control {
    color: $color-base-white;

    &:hover {
      color: $color-blue-medium;
    }
  }

  .happening-now-item-initial {
    display: flex;
    flex-wrap: wrap;

    @media (min-width: $breakpoint-desktop) {
      flex-wrap: nowrap;

      > * {
        flex: 1;
      }
    }
  }

  .happening-now-item {
    display: flex;
    margin-bottom: 1.2rem;
    color: $color-base-blue;
    text-decoration: none;

    &:hover {
      text-decoration: none;
      color: $color-blue-medium;
    }
  }

  &.happening-now--dark .happening-now-item {
    color: $color-base-white;

    &:hover {
      color: $color-blue-medium;
    }
  }

  .happening-now-title {
    @include typeHeadline(true);
    text-transform: uppercase;
    margin: 0.4rem 1.2rem;
  }

  .happening-now-item__media {
    flex: 0 0 7.2rem;
    margin-left: 1.2rem;
  }

  .happening-now-item__event {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 1.2rem;
  }

  .happening-now-item__date {
    @include typeHeadline(true);
    color: $color-blue-light;
    text-transform: uppercase;
    white-space: nowrap;

    &:nth-child(2)::before {
      display: block;
      content: "";
      width: 1.6rem;
      height: 0;
      margin: 0 auto;
      border-top: 1px solid $color-blue-light;
    }
  }

  .happening-now-item__body {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }

  .happening-now-item__title {
    @include typeCaption;
    margin: 0;
  }

  .happening-now-zone {
    position: relative;
    display: none;

    @media (min-width: $breakpoint-desktop) {
      padding-top: 1.2rem;
      border-top: 2px solid transparent;

      &.happening-now-zone--news {
        border-color: $color-blue-medium;
      }

      &.happening-now-zone--announcements {
        border-color: $color-grey-medium;
      }

      &.happening-now-zone--events {
        border-color: $color-blue-light;
      }
    }
  }

  .happening-now-zone-items {
    @media (min-width: $breakpoint-desktop) {
      padding-right: 2.4rem;
      display: flex;
    }

    .happening-now-item {
      flex: 0 0 33.3333%;
    }
  }

  .happening-zone-actions {
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
    text-align: right;
  }

  .happening-now-open,
  .happening-now-close {
    position: absolute;
    top: 0.4rem;
    right: 0;
    font-size: 1.6rem;
  }

  &.happening-now--dark .happening-now-close {
    color: $color-base-white;

    &:hover {
      color: $color-blue-medium;
    }
  }

  @media (max-width: $breakpoint-desktop) {
    .happening-now-control.is-active .happening-now-open {
      display: none !important;
    }
  }
}

$(function () {
  const $openBtn = $(".js-open");
  const $closeBtn = $(".js-close");
  const $sections = $(".js-section");

  $openBtn.on("click", function (e) {
    e.preventDefault();
    const $thisOpenBtn = $(this);
    const $target = $(".js-section--" + e.currentTarget.dataset.target);
    if ($target.length && !$thisOpenBtn.hasClass("is-active")) {
      // Close other sections only on desktop
      if (window.matchMedia("(min-width: 1200px)").matches) {
        $sections.find(".js-close").click();
      }

      $thisOpenBtn.addClass("is-active").find(".js-control").hide();
      $target.slideDown();
    }
  });

  $closeBtn.on("click", function (e) {
    e.preventDefault();
    const section = $(this).closest(".js-section").data("section");
    $("[data-target=" + section + "]").removeClass("is-active");
    $("#" + section + "Control").show();
    $(this).closest(".js-section").slideUp();
  });
});