Materialize Cards

Re-working of Summary Cards to use Materialize

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css">
<div class="background">

</div>

<div class="card expanded large">
  <div class="card-header">
    <span class="card-title">Card Title</span>
    <i class="close material-icons">X</i>
  </div>
  <div class="card-content">
    <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
  </div>
  <div class="card-action">
    <a href="#">Show Card Options</a>
  </div>
</div>

<div class="card extra large">
  <div class="card-header">
  </div>
  <div class="card-content">
</div>

CSS

//html { height: 100%; width: 100%; position: absolute; }
//body { background: cyan; height: 100%; width: 100%; position: absolute; }
body { background: #546e7a; }



.card.expanded.slide-up { top: -500px; }
.card.expanded.slide-up { bottom: 0px; }
.card.extra.slide-up { bottom: 0px !important; display: block; }
.card.extra.slide-down { bottom: -500px !important; }

.card.expanded { top: -500px; animation: top 1s easeInOutExpo; }
.card.extra { bottom: -400px; }

.background {
  width: 100%;
  height: 100%;
  background: #000000;
  opacity: 0;
  position: absolute;
}

.close {
  float: right;
}

.card.large {
  margin: 0 10px 10px 10px;
}

.card-header {
  padding: 15px 10px 20px 20px;
  background: #8e75ac;
  color: white;
}

JavaScript

var duration = 1000;
var easing = "easeInOutExpo";

function hideCard() {
	$(".card.expanded").animate({ top: -500 }, easing, function() {
		$(".background").animate({ opacity: 0 }, 50);
	});
	
};

function showCard() {
	// Add the background if not currently present
	if($(".background").css("opacity") !== 0.3) {
	  $(".background").animate({ opacity: 0.3 }, 50);
	}
	
	// Animate the card
	$(".card.expanded").animate({ top: 0 }, easing);
}

function hideDetail() {
	$(".card.detail").animate({ bottom: 0 });
}




setTimeout(function() {

	showCard();
}, 500);

$(".close").on("click", function() {
	hideCard();
})

$("a").on("click", function() {
  $(".card.extra").animate({ bottom: 0 }, 1000, "easeInOutExpo");
});