Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <select name="columns" id="columns" class="columns">
    <option value="">Responsive Columns</option>
    <option value="33.3333%">Three Columns</option>
    <option value="25%">Four Columns</option>
    <option value="20%">Five Columns</option>
    <option value="16.6667%">Six Columns</option>
</select>
<article class="drawer js-drawer drawer-grid--margin-bottom">
   <div class="drawer__inner">
      <div class="drawer__setter drawer__setter--1 js-drawer-frame js-drawer-content-setter">
         <div class="drawer__title">
            Item Number 1
         </div>
         <div class="drawer__blurb-content js-drawer-blurb-content">
            <div class="drawer__text">
               <div class="drawer__text-frame">
                  <span class="drawer__text-center">
                     <h1>Some Title 1</h1>
                     <p>Sollicitudin vehicula ut, facilisis per purus ac ultricies quam justo semper cursus, dictum pulvinar magnis mollis montes fames himenaeos metus blandit. Lorem suspendisse ullamcorper luctus praesent viverra eu a, scelerisque nascetur cras sit quisque pellentesque venenatis justo, nam donec morbi tellus blandit sapien. Posuere massa arcu donec adipiscing ipsum sodales leo id commodo risus luctus, integer nisl dui fermentum nibh eu metus phasellus tempor at sociosqu, mus curae molestie iaculis fusce per class erat taciti magnis.</p>
                  </span>
               </div>
            </div>
            <div class="drawer__image drawer__image--1" role="img" aria-label="Demo image"><!-- space holder --></div>
         </div>
      </div>
      <div class="drawer__setter drawer__setter--2 js-drawer-frame js-drawer-content-setter">
         <div class="drawer__title">
            Item Number 2
         </div>
         <div class="drawer__blurb-content js-drawer-blurb-content">
            <div class="drawer__text">
               <div class="drawer__text-frame">
                  <span class="drawer__text-center">
                     <h1>Some Title 2</h1>
                     <p>Lorem ipsum dolar sit.</p>
                  </span>
               </div>
            </div>
            <div class="drawer__image drawer__image--2" role="img" aria-label="Demo image"><!-- space holder --></div>
         </div>
      </div>
      <div class="drawer__setter drawer__setter--3 js-drawer-frame js-drawer-content-setter">
         <div class="drawer__title">
            Item Number 3
         </div>
         <div class="drawer__blurb-content js-drawer-blurb-content">
            <div class="drawer__text">
               <div class="drawer__text-frame">
                  <span class="drawer__text-center">
                     <h1>Some Title 3</h1>
                     <p>Facilisis per purus ac ultricies quam justo semper cursus, dictum pulvinar magnis mollis montes fames himenaeos metus blandit. Lorem suspendisse ullamcorper luctus praesent viverra eu a, scelerisque nascetur cras sit quisque pellentesque venenatis justo, nam donec morbi tellus blandit sapien. Posuere massa arcu donec adipiscing ipsum sodales leo id commodo risus luctus, integer nisl dui fermentum nibh eu metus phasellus tempor at sociosqu, mus curae molestie iaculis fusce per class erat taciti magnis.</p>
                  </span>
               </div>
            </div>
            <div class="drawer__image drawer__image--3" role="img" aria-label="Demo image"><!-- space holder --></div>
         </div>
      </div>
      <div class="drawer__setter drawer__setter--4 js-drawer-frame js-drawer-content-setter">
         <div class="drawer__title">
            Item Number 4
         </div>
         <div class="drawer__blurb-content js-drawer-blurb-content">
            <div class="drawer__text">
               <div class="drawer__text-frame">
                  <span class="drawer__text-center">
                     <h1>Some Title 4</h1>
                     <p>Magnis mollis montes fames himenaeos metus blandit. Lorem suspendisse ullamcorper luctus praesent viverra eu a, scelerisque nascetur cras sit quisque pellentesque venenatis justo, nam donec morbi tellus blandit sapien. Posuere massa arcu donec adipiscing ipsum sodales leo id commodo risus luctus, integer nisl dui fermentum nibh eu metus phasellus tempor at sociosqu, mus curae molestie iaculis fusce per class erat taciti magnis.</p>
                     <p>Magnis mollis montes fames himenaeos metus blandit. Lorem suspendisse ullamcorper luctus praesent viverra eu a, scelerisque nascetur cras sit quisque pellentesque venenatis justo, nam donec morbi tellus blandit sapien. Posuere massa arcu donec adipiscing ipsum sodales leo id commodo risus luctus, integer nisl dui fermentum nibh eu metus phasellus tempor at sociosqu, mus curae molestie iaculis fusce per class erat taciti magnis.</p>
                  </span>
               </div>
            </div>
            <div class="drawer__image drawer__image--4 disambiguate" role="img" aria-label="Demo image"><!-- space holder --></div>
         </div>
      </div>
      <div class="drawer__setter drawer__setter--5 js-drawer-frame js-drawer-content-setter">
         <div class="drawer__title">
            Item Number 5
         </div>
         <div class="drawer__blurb-content js-drawer-blurb-content">
            <div class="drawer__text">
               <div class="drawer__text-frame">
                  <span class="drawer__text-center">
                     <h1>Some Title 5</h1>
                     <p>Dictum pulvinar magnis mollis montes fames himenaeos metus blandit. Lorem suspendisse ullamcorper luctus praesent viverra eu a, scelerisque nascetur cras sit quisque pellentesque venenatis justo, nam donec morbi tellus blandit sapien. Posuere massa arcu donec adipiscing ipsum sodales leo id commodo risus luctus, integer nisl dui fermentum nibh eu metus phasellus tempor at sociosqu, mus curae molestie iaculis fusce per class erat taciti magnis.</p>
                  </span>
               </div>
            </div>
            <div class="drawer__image drawer__image--5" role="img" aria-label="Demo image"><!-- space holder --></div>
         </div>
      </div>
      <div class="drawer__setter drawer__setter--6 js-drawer-frame js-drawer-content-setter">
         <div class="drawer__title">
            Item Number 6
         </div>
         <div class="drawer__blurb-content js-drawer-blurb-content">
            <div class="drawer__text">
               <div class="drawer__text-frame">
                  <span class="drawer__text-center">
                     <h1>Some Title 6</h1>
                     <p>Elit sollicitudin vehicula ut, facilisis per purus ac ultricies quam justo semper cursus, dictum pulvinar magnis mollis montes fames himenaeos metus blandit. Lorem suspendisse ullamcorper luctus praesent viverra eu a, scelerisque nascetur cras sit quisque pellentesque venenatis justo, nam donec morbi tellus blandit sapien. Posuere massa arcu donec adipiscing ipsum sodales leo id commodo risus luctus, integer nisl dui fermentum nibh eu metus phasellus tempor at sociosqu, mus curae molestie iaculis fusce per class erat taciti magnis.</p>
                     <p>Elit sollicitudin vehicula ut, facilisis per purus ac ultricies quam justo semper cursus, dictum pulvinar magnis mollis montes fames himenaeos metus blandit. Lorem suspendisse ullamcorper luctus praesent viverra eu a, scelerisque nascetur cras sit quisque pellentesque venenatis justo, nam donec morbi tellus blandit sapien. Posuere massa arcu donec adipiscing ipsum sodales leo id commodo risus luctus, integer nisl dui fermentum nibh eu metus phasellus tempor at sociosqu, mus curae molestie iaculis fusce per class erat taciti magnis.</p>
                  </span>
               </div>
            </div>
            <div class="drawer__image drawer__image--6" role="img" aria-label="Demo image"><!-- space holder --></div>
         </div>
      </div>
      <div class="drawer__setter drawer__setter--7 js-drawer-frame js-drawer-content-setter">
         <div class="drawer__title">
            Item Number 7
         </div>
         <div class="drawer__blurb-content js-drawer-blurb-content">
            <div class="drawer__text">
               <div class="drawer__text-frame">
                  <span class="drawer__text-center">
                     <h1>Some Title 7</h1>
                     <p>Sollicitudin vehicula ut, facilisis per purus ac ultricies quam justo semper cursus, dictum pulvinar magnis mollis montes fames himenaeos metus blandit. Lorem suspendisse ullamcorper luctus praesent viverra eu a, scelerisque nascetur cras sit quisque pellentesque venenatis justo, nam donec morbi tellus blandit sapien. Posuere massa arcu donec adipiscing ipsum sodales leo id commodo risus luctus, integer nisl dui fermentum nibh eu metus phasellus tempor at sociosqu, mus curae molestie iaculis fusce per class erat taciti magnis.</p>
                  </span>
               </div>
            </div>
            <div class="drawer__image drawer__image--7" role="img" aria-label="Demo image"><!-- space holder --></div>
         </div>
      </div>
      <div class="drawer__setter drawer__setter--8 js-drawer-frame js-drawer-content-setter">
         <div class="drawer__title">
            Item Number 8
         </div>
         <div class="drawer__blurb-content js-drawer-blurb-content">
            <div class="drawer__text">
               <div class="drawer__text-frame">
                  <span class="drawer__text-center">
                     <h1>Some Title 8</h1>
                     <p>Justo semper cursus, dictum pulvinar magnis mollis montes fames himenaeos metus blandit. Lorem suspendisse ullamcorper luctus praesent viverra eu a, scelerisque nascetur cras sit quisque pellentesque venenatis justo, nam donec morbi tellus blandit sapien. Posuere massa arcu donec adipiscing ipsum sodales leo id commodo risus luctus, integer nisl dui fermentum nibh eu metus phasellus tempor at sociosqu, mus curae molestie iaculis fusce per class erat taciti magnis.</p>
                  </span>
               </div>
            </div>
            <div class="drawer__image drawer__image--8" role="img" aria-label="Demo image"><!-- space holder --></div>
         </div>
      </div>
      <div class="drawer__setter drawer__setter--9 js-drawer-frame js-drawer-content-setter">
         <div class="drawer__title">
            Item Number 9
         </div>
         <div class="drawer__blurb-content js-drawer-blurb-content">
            <div class="drawer__text">
               <div class="drawer__text-frame">
                  <span class="drawer__text-center">
                     <h1>Some Title 9</h1>
                     <p>Facilisis per purus ac ultricies quam justo semper cursus, dictum pulvinar magnis mollis montes fames himenaeos metus blandit. Lorem suspendisse ullamcorper luctus praesent viverra eu a, scelerisque nascetur cras sit quisque pellentesque venenatis justo, nam donec morbi tellus blandit sapien. Posuere massa arcu donec adipiscing ipsum sodales leo id commodo risus luctus, integer nisl dui fermentum nibh eu metus phasellus tempor at sociosqu, mus curae molestie iaculis fusce per class erat taciti magnis.</p>
                  </span>
               </div>
            </div>
            <div class="drawer__image drawer__image--9" role="img" aria-label="Demo image"><!-- space holder --></div>
         </div>
      </div>
      <div class="drawer__setter drawer__setter--10 js-drawer-frame js-drawer-content-setter">
         <div class="drawer__title">
            Item Number 1
         </div>
         <div class="drawer__blurb-content js-drawer-blurb-content">
            <div class="drawer__text">
               <div class="drawer__text-frame">
                  <span class="drawer__text-center">
                     <h1>Some Title 1</h1>
                     <p>Rus ac ultricies quam justo semper cursus, dictum pulvinar magnis mollis montes fames himenaeos metus blandit. Lorem suspendisse ullamcorper luctus praesent viverra eu a, scelerisque nascetur cras sit quisque pellentesque venenatis justo, nam donec morbi tellus blandit sapien. Posuere massa arcu donec adipiscing ipsum sodales leo id commodo risus luctus, integer nisl dui fermentum nibh eu metus phasellus tempor at sociosqu, mus curae molestie iaculis fusce per class erat taciti magnis.</p>
                     <p>Justo semper cursus, dictum pulvinar magnis mollis montes fames himenaeos metus blandit. Lorem suspendisse ullamcorper luctus praesent viverra eu a, scelerisque nascetur cras sit quisque pellentesque venenatis justo, nam donec morbi tellus blandit sapien. Posuere massa arcu donec adipiscing ipsum sodales leo id commodo risus luctus, integer nisl dui fermentum nibh eu metus phasellus tempor at sociosqu, mus curae molestie iaculis fusce per class erat taciti magnis.</p>
                  </span>
               </div>
            </div>
            <div class="drawer__image drawer__image--10" role="img" aria-label="Demo image"><!-- space holder --></div>
         </div>
      </div>
      <div class="drawer__setter drawer__setter--11 js-drawer-frame js-drawer-content-setter">
         <div class="drawer__title">
            Item Number 1
         </div>
         <div class="drawer__blurb-content js-drawer-blurb-content">
            <div class="drawer__text">
               <div class="drawer__text-frame">
                  <span class="drawer__text-center">
                     <h1>Some Title 1</h1>
                     <p>Semper cursus, dictum pulvinar magnis mollis montes fames himenaeos metus blandit. Lorem suspendisse ullamcorper luctus praesent viverra eu a, scelerisque nascetur cras sit quisque pellentesque venenatis justo, nam donec morbi tellus blandit sapien. Posuere massa arcu donec adipiscing ipsum sodales leo id commodo risus luctus, integer nisl dui fermentum nibh eu metus phasellus tempor at sociosqu, mus curae molestie iaculis fusce per class erat taciti magnis.</p>
                  </span>
               </div>
            </div>
            <div class="drawer__image drawer__image--11" role="img" aria-label="Demo image"><!-- space holder --></div>
         </div>
      </div>
      <div class="drawer__setter drawer__setter--12 js-drawer-frame js-drawer-content-setter">
         <div class="drawer__title">
            Item Number 1
         </div>
         <div class="drawer__blurb-content js-drawer-blurb-content">
            <div class="drawer__text">
               <div class="drawer__text-frame">
                  <span class="drawer__text-center">
                     <h1>Some Title 1</h1>
                     <p>Ultricies quam justo semper cursus, dictum pulvinar magnis mollis montes fames himenaeos metus blandit. Lorem suspendisse ullamcorper luctus praesent viverra eu a, scelerisque nascetur cras sit quisque pellentesque venenatis justo, nam donec morbi tellus blandit sapien. Posuere massa arcu donec adipiscing ipsum sodales leo id commodo risus luctus, integer nisl dui fermentum nibh eu metus phasellus tempor at sociosqu, mus curae molestie iaculis fusce per class erat taciti magnis.</p>
                  </span>
               </div>
            </div>
            <div class="drawer__image drawer__image--12" role="img" aria-label="Demo image"><!-- space holder --></div>
         </div>
      </div>
   </div>
   <div class="drawer__blurb js-drawer-blurb" style="height: auto; display: none;">
        <a href="javascript:void(0);" class="drawer__close js-drawer-close" aria-label="Close">x</a>
        <div class="drawer__blurb-frame js-drawer-blurb-content">
            <!-- awaiting content -->
        </div>
  </div>
</article>
            
          
!
            
              /*------------------------------------*\
    ::Variables/Mixins
\*------------------------------------*/
$row-width:     1440px;
$gap:           0.9375rem;
$gap--big:      $gap*2;
$gap--baby:     $gap*1.5;
$bp-lg--max:    $row-width; // defined in style.scss
$bp-md--max:    800px;
$bp-sm--max:    500px;
$bp-lg--min:    $bp-md--max + 1;
$bp-lg--mid:    round((($bp-lg--max - $bp-lg--min) / 2) + $bp-lg--min);
$bp-md--min:    $bp-sm--max + 1;
$bp-md--mid:    round((($bp-md--max - $bp-md--min) / 2) + $bp-md--min);
$bp-sm--min:    320px;
$bp-sm--mid:    round((($bp-sm--max - $bp-sm--min) / 2) + $bp-sm--min);
$color-1:       teal;
$color-2:       mediumaquamarine;
$color-white:   white;
$color-black:   black;
@mixin bp($media: false, $min: false, $max: false, $custom: false) {
    //Usage:
    // @include bp($max: 600px){ body { background:#000 } }
    // @include bp($min: 600px){ body { background:#fff } }
    // @include bp($min: 600px, $max: 600px){ body { background:#000 } }
    // @include bp($planetary){ body { background:#fff } }
    @if $custom {
        @media #{$custom} { @content; }
    }
    @else if $media {
        @media only screen and (max-width: $media) { @content; }
    }
    @else if $min and $max {
        @media only screen and (min-width: $min) and (max-width: $max) { @content; }
    }
    @else if $min {
        @media only screen and (min-width: $min) { @content; }
    }
    @else if $max {
        @media only screen and (max-width: $max) { @content; }
    }

}

/*------------------------------------*\
    ::Drawer Grid
\*------------------------------------*/
.drawer {
    overflow: hidden;
    &__inner {
        max-width: $row-width;
        margin: 0 auto;
    }
    &__setter {
        position: relative;
        float: left;
        width: 25%;
        cursor: pointer;
        &:after {
            display: block;
            content: "";
            width: 100%;
            padding-bottom: 50%;
            background-size: cover;
            background-position: center;
            opacity: .4;
            transition: opacity 300ms;
        }
        @for $i from 1 through 12 {
            &--#{$i} {
                &:after {
                    background-image: url(https://source.unsplash.com/360x180#{$i}/?nature,water)    
                }
            }
        }
        &.active {
            &:after {
                opacity: 1;
            }
        }
        @include bp($bp-md--mid){
            width: 33.3333%;
        }
        @include bp($bp-sm--max){
            width: 50%;
        }
    }
    &__title {
        position: absolute;
        z-index: 10;
        top: 50%;
        width: 100%;
        text-align: center;
        color: $color-white;
        transition: opacity 300ms;
        .active & {
            opacity: 0;
        }
    }
    &__blurb-content {
        display: none; // only used by js for populating blurb
    }
    &__blurb {
        position: relative;
        float: left;
        width: 100%;
    }
    .drawer__blurb-frame {
        display: flex;
        @include bp($min: $bp-md--mid + 1){
            &:after { // spinner
                $spinner-size: 3.5em;
                content: "";
                position: absolute;
                top: 50%;
                left: 75%;
                z-index: -1;
                width: $spinner-size;
                height: $spinner-size;
                margin-top: $spinner-size * -0.5;
                margin-left: $spinner-size * -0.5;
                border-radius: 50%;
                border-top: 2px solid $color-2;
                border-right: 2px solid transparent;
                animation: spinner .6s linear infinite;
                @keyframes spinner {
                    to {
                        transform: rotate(360deg);
                    }
                }
            }
        }
    }
    &__text {
        display: flex;
        min-width: 50%;
        width: 50%;
        @include bp($bp-md--mid){
            width: 100%;
            min-height: 0;
            padding: 0;
        }
    }
    &__text-frame {
        position: relative;
        z-index: 10;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
        padding: $gap $gap--big $gap $gap;
        background-color: $color-white;
        @include bp($bp-md--mid){
            background-color: transparent;
            color: $color-white;
        }
    }
    &__image {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 50%;
        background-size: cover;
        background-position: center;
        @for $i from 1 through 12 {
            &--#{$i} {
                background-image: url(https://source.unsplash.com/720x32#{$i}/?nature,water)
            }
        }
        @include bp($bp-md--mid){
            width: 100%;
            &:before { // overlay so text is readable
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: rgba($color-2, .7);
            }
        }
    }
    &__close {
        display: block;
        overflow: hidden;
        position: absolute;
        top: $gap/2;
        right: $gap/2;
        z-index: 50;
        width: 50px;
        height: 50px;
        text-indent: -3em;
        background-color: $color-2;
        border-radius: 50%;
        transition: background-color 300ms;
        &:before, // the x
        &:after {
            content: "";
            position: absolute;
            width: 30px;
            height: 3px;
            background-color: $color-white;
            top: 24px;
            right: 10px;
        }
        &:before {
            transform: rotate(-45deg);
        }
        &:after {
            transform: rotate(45deg);
        }
        &:hover {
            background-color: $color-1;
        }
    }
}

///////////////////////////////////////////////////////
body {
    background: teal;
    font-family: "Trebuchet MS", sans-serif;
}
*, *:before, *:after {
    box-sizing: border-box;
}
.columns {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: black;
    color: white;
    border-radius: 0;
    border: 0;
    padding: .5em;
    -webkit-appearance: none;
}
            
          
!
            
              /*------------------------------------*\
    ::Drawer Grid
\*------------------------------------*/
var drawerGrid = {
    // first run
    init: function(){

        // cache things
        var thisObj = this;
        var $group = $('.js-drawer');

        // kick things off
        $group
            .each(function(){
                // cache for this group only
                var $thisGroup = $(this);
                var $drawers = $thisGroup.find('.js-drawer-frame')
                var $contentSetters = $thisGroup.find('.js-drawer-content-setter')
                var $drawerBlurb = $thisGroup.find('.js-drawer-blurb');
                var $close = $thisGroup.find('.js-drawer-close');

                // set initial values
                $drawers.data('blurbFollows', false);
                $drawerBlurb.data('content', '');
                $drawerBlurb.$content = $drawerBlurb.find('.js-drawer-blurb-content');
                // pub/sub the events
                thisObj.subExpand($drawers, $drawerBlurb);
                thisObj.subSetContent($contentSetters, $drawerBlurb);
                thisObj.subMoveBlurb($drawers, $drawerBlurb);
                thisObj.subUpdateContent($drawerBlurb);
                thisObj.subCloseBlurb($drawers, $drawerBlurb);
                thisObj.bindClicks($drawers, $contentSetters, $close);
            });

    },

    // publish expand event on click
    bindClicks: function($drawers, $contentSetters, $close){

        // subscribe to expanding drawers
        $contentSetters
            .on('click.drawerGrid', function(){
                // cache this content setter
                var $thisSetter = $(this);
                // if not already active expand and populate content
                if(!$thisSetter.hasClass('active') && !$thisSetter.hasClass('js-drawer-ignore')){
                    $thisSetter.trigger('setContent.drawerGrid');
                    $thisSetter.trigger('expandBlurb.drawerGrid');
                }
            });
        // subscribe close button to contract on click
        $close.on('click.drawerGrid', function(){
            // have the first drawer close the blurb (somebody's gotta do it)
            $drawers.eq(0).trigger('closeBlurb.drawerGrid');
        });

        /*DEBUG*/ setTimeout(function(){$contentSetters.eq(0).trigger('click.drawerGrid');}, 500);

    },

    // subscribe to expand events
    subExpand: function($drawers, $drawerBlurb){

        // when expand is triggered
        $drawers.on('expandBlurb.drawerGrid', function(){
            // cache this particular drawer
            var $clickDrawer = $(this);
            // identify only this drawer as active
            $drawers.removeClass('active');
            $clickDrawer.addClass('active');
            // get the top of this dom element
            var thisTop = Math.round($clickDrawer.offset().top);
            // determine the index of this drawer among all the others
            var curDrawer = $drawers.index($clickDrawer);
            // set current top to the top of this drawer
            var curTop = thisTop;

            // YAY! i've been programming since 2002 and this is my first production do while
            do { if(curDrawer > 500){ break; } // failsafe
                // get this drawer
                var $drawerAtIndex = $drawers.eq(curDrawer);
                // set the top of this drawer if they exist
                if($drawerAtIndex.length > 0){
                    curTop = Math.round($drawerAtIndex.offset().top);
                } else {
                    curTop = 0;
                }
                // get ready to look at the next drawer
                curDrawer++;
            // the magic: make sure this drawer is in the same row as the clicked drawer
            } while (thisTop == curTop);

            // move the blurb to be right after this row
            $rowDrawer = $drawers.eq(curDrawer - 2);
            $rowDrawer.trigger('moveBlurb.drawerGrid');

        });

    },

    // set content of the blurb
    subSetContent: function($contentSetters, $drawerBlurb){

        $contentSetters.on('setContent.drawerGrid', function(){
            // cache stuff
            var $thisSetter = $(this);
            // identify what's been clicked visually
            $contentSetters.removeClass('active');
            $thisSetter.addClass('active');
            // set the blurb's data to this drawer's info
            $drawerBlurb.data('content', $thisSetter.find('.js-drawer-blurb-content').html());
        });

    },

    // move the blurb location
    subMoveBlurb: function($drawers, $drawerBlurb){

        // on movement of the blurb to this drawer
        $drawers.on('moveBlurb.drawerGrid', function(){
            var $rowDrawer = $(this);
            // if this drawer already had the blurb after it
            if($rowDrawer.data('blurbFollows')){
                // clone the existing blurb
                $oldBlurb = $drawerBlurb.clone();
                // hide the existing blurb and replace it with the clone
                $drawerBlurb.css('display', 'none').after($oldBlurb);
                // slide up the clone and remove it from the dom
                $oldBlurb.slideUp(300, function(){ $(this).remove(); });
                // slide the blurb down with new content
                $drawerBlurb.trigger('updateContent.drawerGrid').slideDown(300, function(){
                    $(this).css('height', 'auto');
                });
            // if this drawer did not have the blurb after it
            } else {
                // identify blurb as following this drawer
                $drawers.data('blurbFollows', false);
                $rowDrawer.data('blurbFollows', true);
                // slide this drawer up
                $drawerBlurb.slideUp(300, function(){
                    // move them to the new row and expand with new content
                    $rowDrawer.after($drawerBlurb.trigger('updateContent.drawerGrid').slideDown(300, function(){
                        $(this).css('height', 'auto');
                    }));
                });
            }
        });

    },

    // close the blurb
    subCloseBlurb: function($drawers, $drawerBlurb){

        $drawers.on('closeBlurb.drawerGrid', function(){
            // set as no longer active
            $drawers.removeClass('active');
            // get rid of the blurb
            $drawerBlurb.stop().slideUp(300);
        });

    },

    // update blurb content
    subUpdateContent: function($drawerBlurb){

        // on update of content
        $drawerBlurb.on('updateContent.drawerGrid', function(){
            // replace existing html with new from data values
            $drawerBlurb.$content.html($drawerBlurb.data('content'));
        });

    },

};

// implementation
jQuery(function($){

    drawerGrid.init();

});


////////////////////////////////////////////////////////
// Column Toggle (quick code for demo only: usually just responsive)
jQuery(function($){
    $('#columns').on('change', function(){
        $('.js-drawer-frame').width($(this).val());
        $('.active').removeClass('active').trigger('closeBlurb.drawerGrid');
    });
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console