<div class="google-expando--wrap">
  <div class="google-expando">

    <div class="google-expando__icon">
      <svg xmlns="//www.w3.org/2000/svg" viewBox="0 0 48 48">
        <path d="M38 26H26v12h-4V26H10v-4h12V10h4v12h12v4z"></path>
      </svg>
      <span class="visuallyhidden" aria-hidden="true">Expand Card</span>
    </div>

    <div class="google-expando__card" aria-hidden="true">
      <img src="//www.google.com/images/srpr/logo11w.png" alt="">
      Material Design Expando Card
    </div>

  </div>
</div>

// Demo Styles *don't use*
*{&:before,&:after{box-sizing: inherit;}}html{box-sizing: border-box;}html,body{margin: 0;padding: 0;height: 100%;font: normal 100%/1.5 source-sans-pro, sans-serif;font-weight: 400;color: #333;background: #B4E0E1;}body,.google-expando__card{display: flex;flex-direction: column;align-items: center;justify-content: center;}img{max-width: 100%;height:100px;}


// Google Expando Config
$google_expando_radius: 2px;
$google_expando_whsp: 48px;

$google_materialshadow_ambient: (
  shadow1: 0 1px 1.5px rgba(0, 0, 0, 0.12),
  shadow2: 0 1px 1px rgba(0, 0, 0, 0.24)
);

$google_materialshadow: (
  ambient: map-values($google_materialshadow_ambient)
);

$google_expando_proportions: (
  icon_size: 24px,
  card_size: 340px
);

$google_expando_transition: (
  transition_one: .2s all cubic-bezier(.4,0,.2,1)
);


// Google Expando Styles !Required!
.google-expando {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  &--wrap {
    position: relative;
    width: 100%;
  }
}

.google-expando__icon {
  border-radius: 90%;
  box-shadow: map-get($google_materialshadow, ambient);
  height: map-get($google_expando_proportions, icon_size);
  width: map-get($google_expando_proportions, icon_size);
  padding: $google_expando_whsp/8;
  transition: map-values($google_expando_transition);
  z-index: 2;
  text-align: center;
  background: #224687;
  color: white;

  svg {
    height: map-get($google_expando_proportions, icon_size);
    vertical-align: text-bottom;
    width: map-get($google_expando_proportions, icon_size);
    fill: white;
  }

  &:hover {
    cursor: pointer;
  }
}

.google-expando__card {
  border-radius: $google_expando_radius;
  box-shadow: map-get($google_materialshadow, ambient);
  height: auto;
  max-width: map-get($google_expando_proportions, card_size);
  margin: 0 auto;
  position: absolute;
  top: (map-get($google_expando_proportions, icon_size) * 2) / 3;
  left: 0;
  right: 0;
  transform: scale(0) translateZ(0);
  transition: map-values($google_expando_transition);
  transform-origin: top center;
  z-index: 1;
  background: white;
  opacity: 0;
}


// Google Expando State
.google-expando__icon.active {
  transform: rotate(45deg);
}

.google-expando__card.active {
  height: auto;
  padding: $google_expando_whsp;
  transform: scale(1) translateZ(0);
  opacity: 1;
}


// Google Expando Utility Helpers
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

// Google Expando Method
// =====================================================

function googleExpandoToggle() {
  $(this).toggleClass('active');
  $(this).next().toggleClass('active');
  $expando_card = $('.google-expando__card');

  // ARIA
  $expando_card.attr('aria-hidden') === 'true' ? $expando_card.attr('aria-hidden', 'false') : $expando_card.attr('aria-hidden', 'true');
}


// Google Expando Event
// =====================================================

$('.google-expando__icon').on('click', function() {
  googleExpandoToggle.call(this);
});