off canvas top region

offcanvas.scss

// OFF-CANVAS TOP REGION
#top {
  background: $grey-light;
  color: $white;
  overflow: hidden;
  > .container {
      position: relative;
      overflow: hidden;
      height: 5em;
      -webkit-transition: height 0.5s ease-out; 
      -moz-transition: height 0.5s ease-out;  
      -o-transition: height 0.5s ease-out; 
      transition: height 0.5s ease-out;

      .o-content {
        width: 90%;
        position: absolute;
        bottom: 0;
        padding: 1em 0 4em;
        left: 5%;
        right: 5%;
      }

      #trigger {
        position: absolute;
        bottom: 0.5em;
        right: 1em;
        display: block;
        font-size: 1em; 
        padding: 0 1em 1em;
        text-indent: -999em;
        @include png-sprite(plus);
        background-color: $white;
        height: 34px;
        width: 34px;
        @include border-radius(5px);

      }
  }

  > .container.active {
    //height: 13.6em;
  }
}

//-------------------
//-- BREAK 1 --------
//-------------------
@include at-breakpoint($break-1) {
  //off canvas top
  #top {
    background-color: $grey-light;
    > .container {
      height: auto;
      .o-content {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        padding-bottom: rhythm(0.5);
        padding-top: 0;
        @include span-columns($total-columns omega);
      }
    }
  }
}

//-------------------
//-- BREAK 2 --------
//-------------------
@include at-breakpoint($break-2) {
  //off canvas top
  #top > .container {
    height: auto!important;
    // reset the transition
    -webkit-transition: height 0s ease-out; 
    -moz-transition: height 0s ease-out;  
    -o-transition: height 0s ease-out; 
    transition: height 0s ease-out;
    #trigger {
      display: none;
    }
    .o-content {
      position: relative;
      left: auto;
      right: auto;
      width: 100%;
    }
  }
}

page.tpl.php

<?php if ($page['top']): ?>
    <div id="top">
      <div class="container">
        <div class="o-content">
          <?php print render($page['top']); ?>
        </div>
      </div>
    </div>
  <?php endif; ?>

script.js

var $container = $('#top > .container');
    var $cHeight = $('.o-content').outerHeight();
    buildCanvas();
    
    function buildCanvas() {
      if ($('#trigger').length < 1) {
        $('<a href="#" id="trigger">More +</a>').appendTo($container);
      }

      $('#trigger').bind('click', function(e) {
        e.preventDefault();
        var $this = $(this);
        $container.toggleClass('active');
        if($container.hasClass('active')) {
          $container.height($cHeight);
          $this.text('Hide -');
        } else {
          $container.height(50);
          $this.text('More +');
        }
      });

    }
  
    $(window).resize(function() { //On Window resizeBy(
      $cHeight = $('.o-content').outerHeight();
    });
    
    setTimeout(function() {
      $(window).resize();
    }, 500);