diff --git a/accordion_init.js b/accordion_init.js
index bf31e0b21f..1afaa058ac 100644
--- a/accordion_init.js
+++ b/accordion_init.js
@@ -5,10 +5,10 @@ $("#accordion").accordion({
 });
 
 $("#open_close_accordion").click(function(){
-  if ($("#accordion").hasClass("closed")){
-    $("#accordion").removeClass("closed");
+  if ($(".course-wrapper").hasClass("closed")){
+    $(".course-wrapper").removeClass("closed");
   } else {
-    $("#accordion").addClass("closed");
+    $(".course-wrapper").addClass("closed");
   }
 });
 
diff --git a/courseware.html b/courseware.html
index 0867ea9eb6..9458306e3b 100644
--- a/courseware.html
+++ b/courseware.html
@@ -29,7 +29,8 @@
   <div class="course-wrapper">
     <div id="accordion">
       <div id="open_close_accordion">
-        Courseware
+        <h2>Courseware Index</h2>
+        <a href="#">close</a>
       </div>
       ${accordion}
     </div>
diff --git a/sass/_courseware.scss b/sass/_courseware.scss
index 85fe533df2..9e76474d8c 100644
--- a/sass/_courseware.scss
+++ b/sass/_courseware.scss
@@ -7,11 +7,24 @@ div.course-wrapper {
 
   div#accordion {
     @extend .sidebar;
+    @include transition( all, .5s, $ease-in-out-quad);
 
     div#open_close_accordion {
+      h2 {
+        display: inline-block;
+      }
+
+      a {
+        text-indent: -9999px;
+        display: inline-block;
+        background: red;
+        width: 16px;
+        height: 16px;
+      }
     }
 
     h3 {
+      @include transition( all, .5s, $ease-in-out-quad);
       overflow: hidden;
       margin: 0;
 
@@ -77,6 +90,7 @@ div.course-wrapper {
 
   section.course-content {
     @extend .content;
+    @include transition( all, .5s, $ease-in-out-quad);
 
     p {
       margin-bottom: lh();
@@ -203,4 +217,36 @@ div.course-wrapper {
       }
     }
   }
+
+  &.closed {
+
+    div#accordion {
+      width: flex-grid(.5);
+
+      div#open_close_accordion {
+        h2 {
+          position: relative;
+          left: -100%;
+        }
+      }
+
+      h3, ul, li {
+        position: relative;
+        left: -100%;
+      }
+    }
+
+    section.course-content {
+      width: flex-grid(11.5) + flex-gutter();
+    }
+
+    // div#accordion {
+    //   left: -(flex-grid(2.7));
+    // }
+
+    // section.course-content {
+    //   left: -(flex-grid(2.7));
+    //   position: relative;
+    // }
+  }
 }