Removing coffeescript and adding custom JS

lms/static/coffee/src/navigation.coffee

-class @Navigation
-  constructor: ->
-    if $('#accordion').length
-      # First look for an active section
-      active = $('#accordion div div:has(a.active)').index('#accordion div div')
-      # if we didn't find one, look for an active chapter
-      if active < 0
-        active = $('#accordion h3.active').index('#accordion h3')
-      # if that didn't work either, default to 0
-      if active < 0
-        active = 0
-      $('#accordion').bind('accordionchange', @log).accordion
-        active: active
-        header: 'h3'
-        autoHeight: false
-        heightStyle: 'content'
-      $('#accordion .ui-state-active').closest('.chapter').addClass('is-open')
-      $('#accordion .ui-state-active').parent().next('div').children('div').addClass('ui-accordion-content-active')
-      $('#accordion .ui-state-active').parent().next('div').show()
-      $('#accordion .ui-state-active').parent().attr('aria-expanded' , 'true').attr('aria-pressed' , 'true')
-      $('#accordion div').filter(':not(.chapter-content-container)').addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom").filter(":not(.ui-accordion-content-active)").hide()
-      $('.ui-accordion-content div').attr('aria-hidden', 'false')
-      $('.ui-accordion-content-active div').attr('aria-hidden', 'true')
-      $('#open_close_accordion a').click @toggle
-      $('#accordion').show()
-      $('#accordion .chapter').click @setChapter
-
-  log: (event, ui) ->
-    Logger.log 'accordion',
-      newheader: ui.newHeader.text()
-      oldheader: ui.oldHeader.text()
-
-  toggle: ->
-    $('.course-wrapper').toggleClass('closed')
-
-  setChapter: ->
-    $('#accordion .is-open').removeClass('is-open').attr('aria-expanded' , 'false').attr('aria-pressed' , 'false').find('h3 span').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e')
-    $(this).closest('.chapter').addClass('is-open').attr('aria-expanded' , 'true').attr('aria-pressed' , 'true').find('h3 span').removeClass('ui-icon-triangle-1-e').addClass('ui-icon-triangle-1-s')
-    $('.ui-accordion-content-active').attr('aria-hidden', 'true')
-    $('.ui-accordion-content-active').parent().hide()
-    $('#accordion .ui-accordion-content-active').removeClass('ui-accordion-content-active')
-    $(this).closest('.chapter').next('div').children('div').addClass('ui-accordion-content-active')
-    $('.ui-accordion-content-active').parent().show().focus()
-    $('.ui-accordion-content-active').show()
-    $('.ui-accordion-content-active').attr('aria-hidden', 'false')
-

lms/static/sass/course/courseware/_sidebar.scss

@@ -39,9 +39,14 @@
                     box-shadow: none;
                 }
 
+                &:hover,
+                &:focus {
+                    background: $sidebar-active-image;
+                }
+
                 .group-heading {
                     @extend %t-title6;
-                    overflow: visible;
+                    position: relative;
                     padding: ($baseline*.75) $baseline ($baseline*.75) ($baseline*2);
                     margin: 0;
                     border-radius: 0;
@@ -52,7 +57,7 @@
                         border: none;
                     }
 
-                    &.ui-state-active {
+                    &.active {
                         border-bottom: none;
                         color: $base-font-color;
 
@@ -62,23 +67,12 @@
                         }
                     }
 
-                    .ui-icon {
+                    .icon {
+                        position: absolute;
                         @include left($baseline);
-                        background-image: url("/static/images/ui-icons_222222_256x240.png");  // jQuery UI sprite
-                        opacity: 0.3;
-
-                        &.ui-icon-triangle-1-e {
-
-                            // CASE: left to right layout
-                            @include ltr {
-                                background-position: -32px -16px; // jQuery UI east arrow position
-                            }
-
-                            // CASE: right to left layout
-                            @include rtl {
-                                background-position: -96px -16px; // jQuery UI west arrow position
-                            }
-                        }
+                        top: 18px;
+                        font-size: 90%;
+                        color: $gray-d1;
                     }
                 }
             }
@@ -107,6 +101,7 @@
                         border-bottom: 0;
                         background: transparent;
                         text-decoration: none;
+                        color: $base-font-color;
 
                         p {
                             @extend %t-action3;
@@ -171,8 +166,10 @@
                         &:hover,
                         &:focus {
 
-                            p {
-                                color: $gray-d3;
+                            color: $link-color;
+
+                            .subtitle {
+                                color: $gray-d1;
                             }
                         }
 

lms/templates/courseware/accordion.html

@@ -6,7 +6,7 @@
 %>
 
 <%def name="make_chapter(chapter)">
-<button class="button-chapter chapter" id="${chapter['display_id']}-parent" aria-controls="${chapter['display_id']}-child" aria-expanded="false" aria-pressed="false">
+<button class="button-chapter chapter" id="${chapter['display_id']}-parent" aria-controls="${chapter['display_id']}-child" aria-pressed="false">
     <%
     if chapter.get('active'):
         aria_label = _('{chapter}, current chapter').format(chapter=chapter['display_name'])
@@ -16,10 +16,11 @@
         active_class = ''
     %>
     <h3 class="group-heading ${active_class}" aria-label="${aria_label}">
+        <span class="icon fa fa-caret-right" aria-hidden="true"></span>
         ${chapter['display_name']}
     </h3>
 </button>
-<div class="chapter-content-container" tabindex="-1">
+<div class="chapter-content-container" tabindex="-1" aria-expanded="false">
     <div class="chapter-menu" id="${chapter['display_id']}-child" role="region" aria-labelledby="${chapter['display_id']}-parent" aria-hidden="false">
         % for section in chapter['sections']:
         <a class="${'active' if 'active' in section and section['active'] else ''} ${'graded'  if 'graded' in section and section['graded'] else ''}" href="${reverse('courseware_section', args=[course_id, chapter['url_name'], section['url_name']])}">