Added lectures and solutions in epandable lists

static/css/application.css

@@ -3750,15 +3750,51 @@ div.info-wrapper section.handouts header p {
   font-size: 12px;
   color: #666; }
 div.info-wrapper section.handouts ol {
-  list-style: none; }
+  list-style: none;
+  background: none; }
 div.info-wrapper section.handouts ol li {
   -webkit-box-shadow: 0 1px 0 #eeeeee;
   -moz-box-shadow: 0 1px 0 #eeeeee;
   box-shadow: 0 1px 0 #eeeeee;
   border-bottom: 1px solid #d3d3d3;
-  padding: 7px 16.989px; }
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 7px 16.989px;
+  background: none;
+  position: relative; }
+div.info-wrapper section.handouts ol li.expandable h4, div.info-wrapper section.handouts ol li.collapsable h4 {
+  padding-left: 18px;
+  font-style: 14px;
+  font-weight: normal; }
+div.info-wrapper section.handouts ol li ul {
+  background: none;
+  margin: 7px -16.989px 0; }
+div.info-wrapper section.handouts ol li ul li {
+  padding-left: 34.989px;
+  -webkit-box-shadow: inset 0 1px 0 #eeeeee;
+  -moz-box-shadow: inset 0 1px 0 #eeeeee;
+  box-shadow: inset 0 1px 0 #eeeeee;
+  border-top: 1px solid #d3d3d3;
+  border-bottom: 0; }
 div.info-wrapper section.handouts ol li:hover {
   background-color: #e9e9e9; }
+div.info-wrapper section.handouts ol li div.hitarea {
+  background-image: url("/static/images/treeview-default.gif");
+  width: 100%;
+  height: 100%;
+  max-height: 20px;
+  display: block;
+  position: absolute;
+  left: 16.989px;
+  margin-left: 0; }
+div.info-wrapper section.handouts ol li div.hitarea:hover {
+  opacity: 0.6;
+  filter: alpha(opacity=60); }
+div.info-wrapper section.handouts ol li div.hitarea.expandable-hitarea {
+  background-position: -80px 1px; }
+div.info-wrapper section.handouts ol li div.hitarea.collapsable-hitarea {
+  background-position: -64px -21px; }
 div.info-wrapper section.handouts ol li h3, div.info-wrapper section.handouts ol li div#wiki_panel input[type="button"], div#wiki_panel div.info-wrapper section.handouts ol li input[type="button"] {
   border-bottom: 0;
   text-transform: uppercase;

templates/info.html

 <%inherit file="main.html" />
+
+<%block name="js_extra">
+<script>
+
+$(document).ready(function(){
+   //if(!page) {
+   //  cookie_page = $.cookie("book_page");
+   //  if(cookie_page) {
+   //    goto_page(cookie_page);
+   //  }
+   //}
+
+   $(".handouts ol").treeview({collapsed:true, unique:true/*, cookieId: "treeview-book-nav", persist: "cookie"*/});
+});
+
+</script>
+</%block>
+
 <%block name="title"><title>Course Info - MITx 6.002x</title></%block>
 
 <%include file="navigation.html" args="active_page='info'" />

templates/sass/_info.scss

@@ -78,17 +78,66 @@ div.info-wrapper {
 
     ol {
       list-style: none;
+      background: none;
 
       li {
         @include box-shadow(0 1px 0 #eee);
         border-bottom: 1px solid #d3d3d3;
+        @include box-sizing(border-box);
         @extend .clearfix;
         padding: 7px lh(.75);
+        background: none;
+        position: relative;
+
+        &.expandable,
+        &.collapsable {
+          h4 {
+            padding-left: 18px;
+            font-style: $body-font-size;
+            font-weight: normal;
+          }
+        }
+
+        ul {
+          background: none;
+          margin: 7px (-(lh(.75))) 0;
+
+          li {
+            padding-left: 18px + lh(.75);
+            @include box-shadow(inset 0 1px 0 #eee);
+            border-top: 1px solid #d3d3d3;
+            border-bottom: 0;
+          }
+        }
 
         &:hover {
           background-color: #e9e9e9;
         }
 
+        div.hitarea {
+          background-image: url('/static/images/treeview-default.gif');
+          width: 100%;
+          height: 100%;
+          max-height: 20px;
+          display: block;
+          position: absolute;
+          left: lh(.75);
+          margin-left: 0;
+
+          &:hover {
+            opacity: 0.6;
+            filter: alpha(opacity=60);
+          }
+
+          &.expandable-hitarea {
+            background-position: -80px 1px;
+          }
+
+          &.collapsable-hitarea {
+            background-position: -64px -21px;
+          }
+        }
+
         h3 {
           border-bottom: 0;
           text-transform: uppercase;