Блог

 var $cell = $('.card');  //open and close card when clicked on card $cell.find('.js-expander').click(function() {   var $thisCell = $(this).closest('.card');   if ($thisCell.hasClass('is-collapsed')) {  $cell.not($thisCell).removeClass('is-expanded').addClass('is-collapsed').addClass('is-inactive');  $thisCell.removeClass('is-collapsed').addClass('is-expanded');    if ($cell.not($thisCell).hasClass('is-inactive')) {  //do nothing  } else {  $cell.not($thisCell).addClass('is-inactive');  }   } else {  $thisCell.removeClass('is-expanded').addClass('is-collapsed');  $cell.not($thisCell).removeClass('is-inactive');  } });  //close card when click on cross $cell.find('.js-collapser').click(function() {   var $thisCell = $(this).closest('.card');   $thisCell.removeClass('is-expanded').addClass('is-collapsed');  $cell.not($thisCell).removeClass('is-inactive');  }); 

 @charset "UTF-8"; * {  box-sizing: border-box; }  body {  background: #eceef1;  font-family: "Slabo 27px", serif;  color: #333a45; }  .wrapper {  margin: 5em auto;  max-width: 1000px;  background-color: #fff;  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.06); }  .header {  padding: 30px 30px 0;  text-align: center; } .header__title {  margin: 0;  text-transform: uppercase;  font-size: 2.5em;  font-weight: 500;  line-height: 1.1; } .header__subtitle {  margin: 0;  font-size: 1.5em;  color: #949fb0;  font-family: "Yesteryear", cursive;  font-weight: 500;  line-height: 1.1; }  .cards {  padding: 15px;  display: flex;  flex-flow: row wrap;   justify-content: center; }  .card {  margin: 15px;  width: calc((100% / 3) - 30px);  transition: all 0.2s ease-in-out; } @media screen and (max-width: 991px) {  .card {  width: calc((100% / 2) - 30px);  } } @media screen and (max-width: 767px) {  .card {  width: 100%;  } } .card:hover .card__inner {  background-color: #1abc9c;  transform: scale(1.05); } .card__inner {  width: 100%;  padding: 30px;  position: relative;  cursor: pointer;  background-color: #949fb0;  color: #eceef1;  font-size: 1.5em;  text-transform: uppercase;  text-align: center;  transition: all 0.2s ease-in-out; } .card__inner:after {  transition: all 0.3s ease-in-out; } .card__inner .fa {  width: 100%;  margin-top: 0.25em; } .card__expander {  transition: all 0.2s ease-in-out;  background-color: #333a45;  width: 100%;  position: relative;  display: flex;  justify-content: center;  align-items: center;  text-transform: uppercase;  color: #eceef1;  font-size: 1.5em; } .card__expander .fa {  font-size: 0.75em;  position: absolute;  top: 10px;  right: 10px;  cursor: pointer; } .card__expander .fa:hover {  opacity: 0.9; } .card.is-collapsed .card__inner:after {  content: "";  opacity: 0; } .card.is-collapsed .card__expander {  max-height: 0;  min-height: 0;  overflow: hidden;  margin-top: 0;  opacity: 0; } .card.is-expanded .card__inner {  background-color: #1abc9c; } .card.is-expanded .card__inner:after {  content: "";  opacity: 1;  display: block;  height: 0;  width: 0;  position: absolute;  bottom: -30px;  left: calc(50% - 15px);  border-left: 15px solid transparent;  border-right: 15px solid transparent;  border-bottom: 15px solid #333a45; } .card.is-expanded .card__inner .fa:before {  content: ""; } .card.is-expanded .card__expander {  max-height: 1000px;  min-height: 200px;  overflow: visible;  margin-top: 30px;  opacity: 1; } .card.is-expanded:hover .card__inner {  transform: scale(1); } .card.is-inactive .card__inner {  pointer-events: none;  opacity: 0.5; } .card.is-inactive:hover .card__inner {  background-color: #949fb0;  transform: scale(1); }  @media screen and (min-width: 992px) {   .card__expander {  width: 250%;  } } @media screen and (min-width: 768px) and (max-width: 991px) {  .card__expander {  width: 150%;  } } 

 lt;!DOCTYPE htmlgt; lt;html lang="en" gt; lt;headgt;  lt;meta charset="UTF-8"gt;  lt;titlegt;CodePen - Expanding Card Grid With Flexboxlt;/titlegt;  lt;link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Slabo 27px|Yesteryear'gt; lt;link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'gt;lt;link rel="stylesheet" href="./style.css"gt;  lt;/headgt; lt;bodygt; lt;!-- partial:index.partial.html --gt; lt;div class="wrapper"gt;   lt;div class="header"gt;  lt;h1 class="header__title"gt;Expanding Card Gridlt;/h1gt;  lt;h2 class="header__subtitle"gt;with Flexboxlt;/h2gt;  lt;/divgt;   lt;div class="cards"gt;   lt;div class=" card [ is-collapsed ] "gt;  lt;div class="card__inner [ js-expander ]"gt;  lt;spangt;Cardlt;/spangt;  lt;i class="fa fa-folder-o"gt;lt;/igt;  lt;/divgt;  lt;div class="card__expander"gt;  lt;i class="fa fa-close [ js-collapser ]"gt;lt;/igt;  Expander  lt;/divgt;  lt;/divgt;   lt;div class=" card [ is-collapsed ] "gt;  lt;div class="card__inner [ js-expander ]"gt;  lt;spangt;Cardlt;/spangt;  lt;i class="fa fa-folder-o"gt;lt;/igt;  lt;/divgt;  lt;div class="card__expander"gt;  lt;i class="fa fa-close [ js-collapser ]"gt;lt;/igt;  Expander  lt;/divgt;  lt;/divgt;   lt;div class=" card [ is-collapsed ] "gt;  lt;div class="card__inner [ js-expander ]"gt;  lt;spangt;Cardlt;/spangt;  lt;i class="fa fa-folder-o"gt;lt;/igt;  lt;/divgt;  lt;div class="card__expander"gt;  lt;i class="fa fa-close [ js-collapser ]"gt;lt;/igt;  Expander  lt;/divgt;  lt;/divgt;   lt;div class=" card [ is-collapsed ] "gt;  lt;div class="card__inner [ js-expander ]"gt;  lt;spangt;Cardlt;/spangt;  lt;i class="fa fa-folder-o"gt;lt;/igt;  lt;/divgt;  lt;div class="card__expander"gt;  lt;i class="fa fa-close [ js-collapser ]"gt;lt;/igt;  Expander  lt;/divgt;  lt;/divgt;   lt;/divgt;  lt;/divgt; lt;!-- partial --gt;  lt;script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'gt;lt;/scriptgt;lt;script src="./script.js"gt;lt;/scriptgt;  lt;/bodygt; lt;/htmlgt; 

 var $cell = $('.card');  //open and close card when clicked on card $cell.find('.js-expander').click(function() {   var $thisCell = $(this).closest('.card');   if ($thisCell.hasClass('is-collapsed')) {  $cell.not($thisCell).removeClass('is-expanded').addClass('is-collapsed').addClass('is-inactive');  $thisCell.removeClass('is-collapsed').addClass('is-expanded');    if ($cell.not($thisCell).hasClass('is-inactive')) {  //do nothing  } else {  $cell.not($thisCell).addClass('is-inactive');  }   } else {  $thisCell.removeClass('is-expanded').addClass('is-collapsed');  $cell.not($thisCell).removeClass('is-inactive');  } });  //close card when click on cross $cell.find('.js-collapser').click(function() {   var $thisCell = $(this).closest('.card');   $thisCell.removeClass('is-expanded').addClass('is-collapsed');  $cell.not($thisCell).removeClass('is-inactive');  }); 

 @charset "UTF-8"; * {  box-sizing: border-box; }  body {  background: #eceef1;  font-family: "Slabo 27px", serif;  color: #333a45; }  .wrapper {  margin: 5em auto;  max-width: 1000px;  background-color: #fff;  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.06); }  .header {  padding: 30px 30px 0;  text-align: center; } .header__title {  margin: 0;  text-transform: uppercase;  font-size: 2.5em;  font-weight: 500;  line-height: 1.1; } .header__subtitle {  margin: 0;  font-size: 1.5em;  color: #949fb0;  font-family: "Yesteryear", cursive;  font-weight: 500;  line-height: 1.1; }  .cards {  padding: 15px;  display: flex;  flex-flow: row wrap;   justify-content: center; }  .card {  margin: 15px;  width: calc((100% / 3) - 30px);  transition: all 0.2s ease-in-out;   /* ---------- HERE ---------- */  display: flex;  flex-direction: column; }  @media screen and (max-width: 991px) {  .card {  width: calc((100% / 2) - 30px);  } } @media screen and (max-width: 767px) {  .card {  width: 100%;  } } .card:hover .card__inner {  background-color: #1abc9c;  transform: scale(1.05); } .card__inner {  width: 100%;  padding: 30px;  position: relative;  cursor: pointer;  background-color: #949fb0;  color: #eceef1;  font-size: 1.5em;  text-transform: uppercase;  text-align: center;  transition: all 0.2s ease-in-out; } .card__inner:after {  transition: all 0.3s ease-in-out; } .card__inner .fa {  width: 100%;  margin-top: 0.25em; } .card__expander {  transition: all 0.2s ease-in-out;  background-color: #333a45;  width: 100%;  position: relative;  display: flex;  justify-content: center;  align-items: center;  text-transform: uppercase;  color: #eceef1;  font-size: 1.5em; }  /* ---------- HERE ---------- */ @media screen and (min-width: 768px) {  .card:nth-child(odd) .card__expander {  align-self: start;  margin-left: calc(50% - 75px);  }  .card:nth-child(even) .card__expander {  align-self: end;  margin-right: calc(50% - 75px);  } } @media screen and (min-width: 991px) {  .card:nth-child(1) .card__expander {  align-self: start;  margin-left: calc(50% - 45px);  }  .card:nth-child(3) .card__expander {  align-self: end;  margin-right: calc(50% - 45px);  }  .card:nth-child(even) .card__expander {  align-self: center;  margin: 0;  } } /* -------------------------- */  .card__expander .fa {  font-size: 0.75em;  position: absolute;  top: 10px;  right: 10px;  cursor: pointer; } .card__expander .fa:hover {  opacity: 0.9; } .card.is-collapsed .card__inner:after {  content: "";  opacity: 0; } .card.is-collapsed .card__expander {  max-height: 0;  min-height: 0;  overflow: hidden;  margin-top: 0;  opacity: 0; } .card.is-expanded .card__inner {  background-color: #1abc9c; } .card.is-expanded .card__inner:after {  content: "";  opacity: 1;  display: block;  height: 0;  width: 0;  position: absolute;  bottom: -30px;  left: calc(50% - 15px);  border-left: 15px solid transparent;  border-right: 15px solid transparent;  border-bottom: 15px solid #333a45; } .card.is-expanded .card__inner .fa:before {  content: ""; } .card.is-expanded .card__expander {  max-height: 1000px;  min-height: 200px;  overflow: visible;  margin-top: 30px;  opacity: 1; } .card.is-expanded:hover .card__inner {  transform: scale(1); } .card.is-inactive .card__inner {  pointer-events: none;  opacity: 0.5; } .card.is-inactive:hover .card__inner {  background-color: #949fb0;  transform: scale(1); }  @media screen and (min-width: 992px) {   .card__expander {  width: 250%;  } } @media screen and (min-width: 768px) and (max-width: 991px) {  .card__expander {  width: 150%;  } } 

 lt;!DOCTYPE htmlgt; lt;html lang="en" gt; lt;headgt;  lt;meta charset="UTF-8"gt;  lt;titlegt;CodePen - Expanding Card Grid With Flexboxlt;/titlegt;  lt;link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Slabo 27px|Yesteryear'gt; lt;link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'gt;lt;link rel="stylesheet" href="./style.css"gt;  lt;/headgt; lt;bodygt; lt;!-- partial:index.partial.html --gt; lt;div class="wrapper"gt;   lt;div class="header"gt;  lt;h1 class="header__title"gt;Expanding Card Gridlt;/h1gt;  lt;h2 class="header__subtitle"gt;with Flexboxlt;/h2gt;  lt;/divgt;   lt;div class="cards"gt;   lt;div class=" card [ is-collapsed ] "gt;  lt;div class="card__inner [ js-expander ]"gt;  lt;spangt;Cardlt;/spangt;  lt;i class="fa fa-folder-o"gt;lt;/igt;  lt;/divgt;  lt;div class="card__expander"gt;  lt;i class="fa fa-close [ js-collapser ]"gt;lt;/igt;  Expander  lt;/divgt;  lt;/divgt;   lt;div class=" card [ is-collapsed ] "gt;  lt;div class="card__inner [ js-expander ]"gt;  lt;spangt;Cardlt;/spangt;  lt;i class="fa fa-folder-o"gt;lt;/igt;  lt;/divgt;  lt;div class="card__expander"gt;  lt;i class="fa fa-close [ js-collapser ]"gt;lt;/igt;  Expander  lt;/divgt;  lt;/divgt;   lt;div class=" card [ is-collapsed ] "gt;  lt;div class="card__inner [ js-expander ]"gt;  lt;spangt;Cardlt;/spangt;  lt;i class="fa fa-folder-o"gt;lt;/igt;  lt;/divgt;  lt;div class="card__expander"gt;  lt;i class="fa fa-close [ js-collapser ]"gt;lt;/igt;  Expander  lt;/divgt;  lt;/divgt;   lt;div class=" card [ is-collapsed ] "gt;  lt;div class="card__inner [ js-expander ]"gt;  lt;spangt;Cardlt;/spangt;  lt;i class="fa fa-folder-o"gt;lt;/igt;  lt;/divgt;  lt;div class="card__expander"gt;  lt;i class="fa fa-close [ js-collapser ]"gt;lt;/igt;  Expander  lt;/divgt;  lt;/divgt;   lt;/divgt;  lt;/divgt; lt;!-- partial --gt;  lt;script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'gt;lt;/scriptgt;lt;script src="./script.js"gt;lt;/scriptgt;  lt;/bodygt; lt;/htmlgt;