Peek accordian simulation

try to reproduce the accordian effect: https://www.smashingmagazine.com/2016/05/improve-your-designs-with-the-principles-of-continuation-and-common-fate-part-three/

by PhilM

HTML

<script src="https://oridomi.com/oridomi.min.js"></script>
<div class="calendar">
    <div class="calendar__day">
      <span class="calendar__metricOfDay" data-dayMetricValue="5"></span>
      <span class="calendar__nameOfDay">mon</span>
      <span class="calendar__numberOfDay">01</span>
    </div>
    <div class="calendar__day">
      <span class="calendar__metricOfDay" data-dayMetricValue="4"></span>
      <span class="calendar__nameOfDay">tue</span>
      <span class="calendar__numberOfDay">02</span>
    </div>
    <div class="calendar__day">
      <span class="calendar__metricOfDay" data-dayMetricValue="6"></span>
      <span class="calendar__nameOfDay">wed</span>
      <span class="calendar__numberOfDay">03</span>
    </div>
    <div class="calendar__day">
      <span class="calendar__metricOfDay" data-dayMetricValue="5"></span>
      <span class="calendar__nameOfDay">thu</span>
      <span class="calendar__numberOfDay">04</span>
    </div>
    <div class="calendar__day">
      <span class="calendar__metricOfDay" data-dayMetricValue="3"></span>
      <span class="calendar__nameOfDay">fri</span>
      <span class="calendar__numberOfDay">05</span>
    </div>
    <div class="calendar__day">
      <span class="calendar__metricOfDay" data-dayMetricValue="8"></span>
      <span class="calendar__nameOfDay">sat</span>
      <span class="calendar__numberOfDay">06</span>
    </div>
    <div class="calendar__day">
      <span class="calendar__metricOfDay" data-dayMetricValue="2"></span>
      <span class="calendar__nameOfDay">sun</span>
      <span class="calendar__numberOfDay">07</span>
    </div>
    <div class="calendar__dayBookings">
      <div class="calendar__dayBooking">
        <div class="calendar__dayBookingTime">
          <span class="time__hours">09:30</span>
          <span class="time__ampm">am</span>
          <span class="calendar__dayBookingSummary">To do</span>
        </div>
      </div>
      <div class="calendar__dayBooking">
        <div...

CSS

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(https://fonts.gstatic.com/s/lato/v11/dPJ5r9gl3kK6ijoeP1IRsvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(https://fonts.gstatic.com/s/lato/v11/EsvMC5un3kjyUhB9ZEPPwg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

* {
  box-sizing: border-box;
}

.calendar{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 320px;
  padding: 5px;
  background-color: #39BDEC;
  color: #D1FBFE;
  font-family: 'Lato', sans-serif;
  text-align:center;
}

.calendar__day{
  flex: 1 1 44px;
  height: 90px;
  padding:12px 5px 12px 5px;
  display:flex;
  flex-direction:column;
  justify-content: flex-end;
  align-items: center;
  border-width: 0 0 0.5px 0;
  border-style: solid;
  border-color: #4FC3EA;
}

.calendar__metricOfDay{
  width:4px;
  background-color: #A6E4F8;
}

.calendar__nameOfDay{
  text-transform: uppercase;
  color: #A6E4F8;
  font-size: 0.4em;
  margin:3px 0 0 0;
}

.calendar__numberOfDay{
  cursor: default;
  padding: 1px 4px;
  transition: background-color 0.2s;
}

.calendar__numberOfDay:hover{
  background-color: #4FC3EA;
}

.calendar__numberOfDay.selected{
  background-color: #FEF0E6;
  color: #537579;
}

.calendar__dayBookings{
  flex: 100 100 300px;
  background-color: white;
  color: black;
  position: relative;
  margin-left: -5px!important;
  margin-right: -5px!important;
  max-height: 190px;
  overflow-y: hidden;
  transition: max-height 0.6s ease-out;
}

.calendar__dayBookings--closed{
  max-height: 0px;
}

.calendar__dayBooking{
  padding: 20px 5px;
 ...

JavaScript

$('.calendar__metricOfDay').each(function(){ 
    var size = $(this).attr('data-dayMetricValue');
    $(this).height(size*3);
});

var $bookings = $(".calendar__dayBookings").oriDomi({
	hPanels: 3,
  maxAngle: 90,
  speed: 600,
  perspective: 300,
  shadingIntensity: 5
});

$bookings.oriDomi(true).accordion(-90, 'top');
$bookings.addClass("calendar__dayBookings--closed");

var $selectedDay;

$('.calendar__numberOfDay').click(function(){
	if ($selectedDay)
  {
  	$selectedDay.removeClass('selected');
  }
  
  var $clickedDay = $(this);
  if ($selectedDay && $clickedDay[0] == $selectedDay[0]){
  	// hide details
    $bookings.oriDomi(true).accordion(-90, 'top');
		$bookings.addClass("calendar__dayBookings--closed");
    
    // clear selection
    $selectedDay = undefined;
  }
  else {
    if ($selectedDay) {
      // swap details if on same row
    }
    else {
      // show details
			$bookings.removeClass("calendar__dayBookings--closed");
      $bookings.oriDomi(true).accordion(0, 'top');
    }
    
    // update selection
    $clickedDay.addClass('selected');
  	$selectedDay = $clickedDay;
  }
});