2x2 Grid with expandable cells

2x2 Grid with expandable cells.markdown

2x2 Grid with expandable cells

A 2x2 grid layout with cells expanding/collapsing on click.

A Pen by Aurelien Giraud on CodePen.

License.

index.html

<div class="row">
  <div class="col-xs-6 section section-default">Section 1</div>
  <div class="col-xs-6 section section-default">Section 2</div>
  <div class="col-xs-6 section section-default">Section 3</div>
  <div class="col-xs-6 section section-default">Section 4</div>
</div>

script.js

/**
 * JS file for : 2x2 Grid with expandable cells
 */

// 
$(document).ready(function() {
  // Define the different possible grid configurations
  // 'default' is for the onload page configuration
  // 'first', 'second', etc.  refer to the index of the 'active' section in the grid.
  var gridConfigurations = {
    default: [{w:6,h:'default'},{w:6,h:'default'},{w:6,h:'default'},{w:6,h:'default'}],
    first: [{w:10,h:'expanded'},{w:2,h:'expanded'},{w:10,h:'collapsed'},{w:2,h:'collapsed'}],
    second: [{w:2,h:'expanded'},{w:10,h:'expanded'},{w:2,h:'collapsed'},{w:10,h:'collapsed'}],
    third: [{w:10,h:'collapsed'},{w:2,h:'collapsed'},{w:10,h:'expanded'},{w:2,h:'expanded'}],
    fourth: [{w:2,h:'collapsed'},{w:10,h:'collapsed'},{w:2,h:'expanded'},{w:10,h:'expanded'}]
  };
  // Define onClick behaviour
  $('.row').on('click', '.section', function() {
    var index = $(this).index();
    switch (index) {
      case 0:
        modifyGrid(gridConfigurations.first);
        break;
      case 1:
        modifyGrid(gridConfigurations.second);
        break;
      case 2:
        modifyGrid(gridConfigurations.third);
        break;
      case 3:
         modifyGrid(gridConfigurations.fourth);
        break;
    }
    $(this).addClass('section-active');
  })
});

// 'modifyGrid' modifies the grid so that it matches the configuration passed as an argument
function modifyGrid(gridConfigArray) {
  $('.section').each( function(index){
    $(this).removeClass("col-xs-6 col-xs-2 col-xs-10 section-default section-collapsed section-expanded section-active").addClass("col-xs-" + gridConfigArray[index].w + " section-" + gridConfigArray[index].h);
  })
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

/**
 * SCSS file for : 2x2 Grid with expandable cells
 */

// Define background colors
$bgd-colors: #F44336 #3F51B5 #4CAF50 #FFC107;

// Create mixin to set the background-color
@mixin set-background($index) {
  background-color: nth($bgd-colors, $index);
}

// Create mixin to set the 'dimmed' background-color
@mixin set-background-dimmed($index) {
  background-color: desaturate(nth($bgd-colors, $index), 10);
}

// Set the background-colors of the 'non-active' sections
@for $i from 1 through 4 {
  .section:nth-child(#{$i}) {
    @include set-background-dimmed($i);
  }
}

// Set the default background-colors of sections and the background-colors of active sections
@for $i from 1 through 4 {
  .section:nth-child(#{$i}).section-expanded.section-active,
  .section:nth-child(#{$i}).section-default {
    @include set-background($i);
  }
}

.section {
  height: 50vh; /* See buggyfill and polyfill links on caniuse.com */
}

.section-collapsed {
  height: 20vh;
}

.section-expanded {
  height: 80vh;
}

.section-active {
  z-index: 1;
  box-shadow: 0 0 3px 3px rgba(0,0,0,0.15);
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />