jQuery.sameheight example

Align items on the same row

by Nukinuki

HTML

<script src="https://cdn.jsdelivr.net/gh/nukinuki/sameheight@0.1/dist/jquery.sameheight.js"></script>
<div class="buttons">
  <a href="#" class="small-button" id="disable">Disable</a>
  <a href="#" class="small-button" id="enable">Enable</a>
</div>
<div class="list">
  <div class="item">
    <div class="title" data-height-group="title">Iron Man (2008)</div>
    <div class="description" data-height-group="description">
       Billionaire industrialist Tony Stark builds himself a suit of armor after he is taken captive by a terrorist organization. Free from his captors, he decides to upgrade and don his armor in order to hunt down weapons that were sold under the table.
    </div>
    <div class="button"><a href="#">Watch now</a></div>
  </div>
  <div class="item">
    <div class="title" data-height-group="title">The Incredible Hulk (2008)</div>
    <div class="description" data-height-group="description">
       After being exposed to gamma radiation that causes him to transform into the monstrous Hulk, scientist Bruce Banner goes on the run and isolates himself from his love, Betty Ross.
       <a class="showmore" href="#">Show more</a>
       <span class="more">Hunted by the military, Banner seeks to cure himself and prevent his condition from being weaponized.</span>
    </div>
    <div class="button"><a href="#">Watch now</a></div>
  </div>
  <div class="item">
    <div class="title" data-height-group="title">Iron Man 2 (2010)</div>
    <div class="description" data-height-group="description">
       After Tony Stark reveals himself to be Iron Man, the U.S. government demands he hand over his technology. Meanwhile, a rival industrialist and a Russian scientist conspire to use his own technology against him.
    </div>
    <div class="button"><a href="#">Watch now</a></div>
  </div>
  <div class="item">
    <div class="title" data-height-group="title">Thor (2011)</div>
    <div class="description" data-height-group="description">
       Thor, crown prince of...

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  color: #ccc;
  font-size: 14px;
  line-height: 1.4;
}
.list {
  display: flex;
  flex-wrap: wrap;
  margin-left: -20px;
  margin-top: -40px;
}
.list:after {
  content: '';
  display: block;
  clear: left;
}
.item {
  box-sizing: border-box;
  width: 33.3333%;
  padding-left: 20px;
  margin-top: 40px;
}
.title {
  font-weight: bold;
  font-size: 130%;
  margin-bottom: 20px;
}
.button {
  margin-top: 20px;
}
.button a, .small-button {
  display: inline-block;
  padding: 5px 10px;
  background: #238AF7;
  color: white;
  border-radius: 3px;
  text-decoration: none;
}
.showmore {
  text-decoration: none;
  color: #238AF7;
  border-bottom: 1px dashed;
}
.more {
  display: none;
}
.buttons {
  margin-bottom: 20px;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #666;
}
.small-button {
  font-size: 80%;
  padding: 3px 5px;
  background-color: #999;
}

JavaScript

$(function(){
	$('.showmore').on('click', function(e){
  	$(this).hide().closest('.description').find('.more').show();
    $.sameheight('update');
    e.preventDefault();
  });
  $('#disable').on('click', function(e){
  	$.sameheight('disable');
    e.preventDefault();
  });
  $('#enable').on('click', function(e){
  	$.sameheight('enable');
    e.preventDefault();
  });
});