Off-Canvas Nav with Dropdown Accordions Clipping Text

Question

I'm using Foundation v5.5 and combined two different js codes to create a usable off-canvas top navigation with dropdown accordions.

However, when any of the dropdown accordions are selected, the text is being clipped because the .offcanvas-top class's height is being specified by the JS, and I simply don't know enough JS to add 100px to the height of .offcanvas-top. Thoughts?

Here is a link to my codepen and the js in question (I'm using WordPress, hence the noConflict):

//offcanvas dropdown accordions
var $s = jQuery.noConflict();
    $s(".off-canvas-submenu").hide();
    $s(".off-canvas-submenu-call").click(function() {
         var icon = $s(this).parent().next(".off-canvas-submenu").is(':visible') ? '+' : '-';
         $s(this).parent().next(".off-canvas-submenu").slideToggle('fast');
         $s(this).find("span").text(icon);
    });

//Offcanvas menu
(function(w){
     var $z = jQuery.noConflict();
      var $container = $z('.offcanvas-top'),
                $cHeight = $z('.o-content').outerHeight();
            $z(document).ready(function() {
                buildCanvas();
            });

            function buildCanvas() {
                $z('<a class="blue_bg button" href="#" id="trigger">Explore KSAS +</a>').appendTo($container);

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

            }

            $z(window).resize(function() { //On Window resizeBy(
                $cHeight = $z('.o-content').outerHeight();
        console.log($cHeight);
            });


        })(this);

with a screenshot of the problem below:

Before:

Clipped text from active accordion:

Answer 1

The following will get you close. I combined it all into function because I did not see the purpose of multiple noConflict()'s.

JS

//Offcanvas menu
(function(w) {
  var $z = jQuery.noConflict();
  var $container = $z('.offcanvas-top');
  var $cHeightMax = $z('.o-content').outerHeight();
  console.log($cHeightMax);
  $z(".off-canvas-submenu").hide();
  var $cHeightMin = $z('.o-content').outerHeight();
  console.log($cHeightMin);
  $z(document).ready(function() {
    buildCanvas();
  });

  function buildCanvas() {
    $z(".off-canvas-submenu-call").click(function() {
      var icon = $z(this).parent().next(".off-canvas-submenu").is(':visible') ? '+' : '-';
      var $subMenu = $z(this).parent().next(".off-canvas-submenu");
      
      $z(this).find("span").text(icon);
      
      if ($subMenu.css('display') === 'none') {
        $container.height($cHeightMax);
        $subMenu.slideToggle('fast');
      } else {
        $container.height($cHeightMin);
        $subMenu.slideToggle('fast');
      }
      
    });

    $z('<a class="blue_bg button" href="#" id="trigger">Explore KSAS +</a>').appendTo($container);

    $z('#trigger').bind('click', function(e) {
      e.preventDefault();
      var $this = $z(this);
      $container.toggleClass('active');
      if ($container.hasClass('active')) {
        $container.height($cHeightMin);
       $z('.o-content').show();
        $this.text('Hide -');
      } else {
        $container.height(50);
        $z('.o-content').hide();
        $this.text('Explore KSAS +');
        $z(".off-canvas-submenu").hide();
        $z(".off-canvas-submenu-call span").text('+');
      }
    });

  }

  $z(window).resize(function() { //On Window resizeBy(
    $cHeight = $z('.o-content').outerHeight();
    console.log($cHeight);
  });

})(this);

I changed the CSS of .o-content to this:

CSS

.o-content {
  width: 100%;
  position: absolute;
  padding: 1em 1em 2.5em;
  display: none;
}