Add JS

docs/index.js

@@ -0,0 +1,61 @@
+$(document).ready(function() {
+  var $api = $('.api');
+  var $start = $('.start');
+  var $show = $('.api .show');
+  var $hide = $('.api .hide');
+  var width = $(window).width();
+  var height = $(window).height();
+  var THRESHOLD = 700;
+
+  init();
+
+  $(window).on('resize', function() {
+    width = $(window).width();
+    height = $(window).height();
+
+    init();
+  });
+
+  function init() {
+    if (width < THRESHOLD) {
+      $api.addClass('fullscreen');
+      $start.addClass('full');
+    } else {
+      $api.removeClass('fullscreen');
+      $start.removeClass('full');
+    }
+
+    if ($api.attr('class').indexOf('hidden') === -1) {
+      showAPI();
+    } else {
+      hideAPI();
+    }
+  }
+
+  function hideAPI() {
+    $api.addClass('hidden');
+    if (width >= THRESHOLD) {
+      $start.addClass('full');
+    }
+    $start.removeClass('hidden');
+    $hide.hide();
+    $show.show();
+  }
+
+  function showAPI() {
+    $api.removeClass('hidden');
+    if (width >= THRESHOLD) {
+      $start.removeClass('full');
+    }
+    $start.addClass('hidden');
+    $show.hide();
+    $hide.show();
+  }
+
+  $('body').on('click', '.hide', function() {
+    hideAPI();
+  });
+  $('body').on('click', '.hidden', function() {
+    showAPI();
+  });
+});