iTunes/Netflix grid detail expansion prototype

No JavaScript!

by lasha

HTML

<div class="row">
  <div class="row-cover-layer"></div>
  
  <input type="radio" name="row" class="checkbox-trigger" id="item-1">
  <label class="item" for="item-1"><span>Label 1</span></label>
  <div class="item-detail">1</div>
  
  <input type="radio" name="row" class="checkbox-trigger" id="item-2">
  <label class="item" for="item-2"><span>Label 2</span></label>
  <div class="item-detail">2</div>
  
  <input type="radio" name="row" class="checkbox-trigger" id="item-3">
  <label class="item" for="item-3"><span>Label 3</span></label>
  <div class="item-detail">3</div>
  

  <div class="item-details"></div>
  
  <!-- <input type="radio" name="row" class="checkbox-trigger" id="item-1"> -->
  <div class="item-detail">1</div>
  <!-- <input type="radio" name="row" class="checkbox-trigger" id="item-2"> -->
  <div class="item-detail">2</div>
  <!-- <input type="radio" name="row" class="checkbox-trigger" id="item-3"> -->
  <div class="item-detail">3</div>
</div>

<div class="row">
  <div class="row-cover-layer"></div>
  
  <input type="radio" name="row" class="checkbox-trigger" id="item-4">
  <label class="item" for="item-4"><span>Label 4</span></label>
  <div class="item-detail">4</div>
  
  <input type="radio" name="row" class="checkbox-trigger" id="item-5">
  <label class="item" for="item-5"><span>Label 5</span></label>
  <div class="item-detail">5</div>
  
  <input type="radio" name="row" class="checkbox-trigger" id="item-6">
  <label class="item" for="item-6"><span>Label 6</span></label>
  <div class="item-detail">6</div>
  

  <div class="item-details"></div>
  
  <!-- <input type="radio" name="row" class="checkbox-trigger" id="item-1"> -->
  <div class="item-detail">1</div>
  <!-- <input type="radio" name="row" class="checkbox-trigger" id="item-2"> -->
  <div class="item-detail">2</div>
  <!-- <input type="radio" name="row" class="checkbox-trigger" id="item-3"> -->
  <div class="item-detail">3</div>
</div>

<!-- <div class="row">
  <label class="item"...

SCSS

.row {
  position: relative;
  border: 1px solid #555;
  overflow: hidden;
}
.row-cover-layer {
  height: 100px; width: 100%;
  background-color: white;
  position: absolute;
  z-index: 1;
  /* opacity: 0; */
}
label.item {
  border: 1px solid #000;
  float: left;
  margin-right: 20px;
  display: inline-block;
  height: 100px;
  width:100px;
  transition: background-color .3s ease-in-out;
}
.item-details {
  clear: both;
  /* background-color: red; */
  background-color: rgba(0,0,0,0.2);
  height: 0;
  transition: all .3s ease-in-out;
  z-index: 0;
}
.item-detail {
  position: absolute;
  overflow: hidden;
  opacity: 0;
  height: 70px;
  width: 100%;
  bottom: 0;
  /* background-color: rgba(0,0,0,0.2); */
  /* transition: all .3s ease-in-out; */
  transition: opacity .3s ease-in-out;
  transform: translateY(100%);
}
/*.checkbox-trigger {
  display: none;
  position: relative;
  z-index: 10;
}*/
label.item { position: relative; z-index: 1;}
.checkbox-trigger:checked {
  & + label.item {
    background-color: rgba(0,0,0,0.2);
    & + .item-detail {
      height: 70px;
      transform: translateY(0);
      opacity: 1;
    }
  }
  & ~ .item-details {
    height: 70px;
  }
  /* & + .item-detail {
    height: 70px;
  } */
}

JavaScript

$('body').on(
	'click',
  'label.item',
  function(e){
		var $this = $(this);
    var $relatedRadio = $this.prev('.checkbox-trigger');
		if( $relatedRadio.prop('checked') == true ) {
    	e.preventDefault();
      $relatedRadio.prop('checked', false)
    }
})