diff --git a/common/test/acceptance/pages/lms/course_nav.py b/common/test/acceptance/pages/lms/course_nav.py
index 21976ea5b2..c47640378f 100644
--- a/common/test/acceptance/pages/lms/course_nav.py
+++ b/common/test/acceptance/pages/lms/course_nav.py
@@ -82,7 +82,7 @@ class CourseNavPage(PageObject):
 
         # Click the section to ensure it's open (no harm in clicking twice if it's already open)
         # Add one to convert from list index to CSS index
-        section_css = 'nav .chapter:nth-of-type({0})'.format(sec_index + 1)
+        section_css = '.course-navigation .chapter:nth-of-type({0})'.format(sec_index + 1)
         self.q(css=section_css).first.click()
 
         # Get the subsection by index
@@ -94,7 +94,7 @@ class CourseNavPage(PageObject):
             return
 
         # Convert list indices (start at zero) to CSS indices (start at 1)
-        subsection_css = "nav .chapter-content-container:nth-of-type({0}) .chapter-menu .menu-item:nth-of-type({1})".format(
+        subsection_css = ".course-navigation .chapter-content-container:nth-of-type({0}) .chapter-menu .menu-item:nth-of-type({1})".format(
             sec_index + 1, subsec_index + 1
         )
 
@@ -130,7 +130,7 @@ class CourseNavPage(PageObject):
         """
         Return a list of all section titles on the page.
         """
-        chapter_css = 'nav .chapter .group-heading'
+        chapter_css = '.course-navigation .chapter .group-heading'
         return self.q(css=chapter_css).map(lambda el: el.text.strip()).results
 
     def _subsection_titles(self, section_index):
@@ -140,7 +140,7 @@ class CourseNavPage(PageObject):
         """
         # Retrieve the subsection title for the section
         # Add one to the list index to get the CSS index, which starts at one
-        subsection_css = 'nav .chapter-content-container:nth-of-type({0}) .chapter-menu .menu-item a p:nth-of-type(1)'.format(
+        subsection_css = '.course-navigation .chapter-content-container:nth-of-type({0}) .chapter-menu .menu-item a p:nth-of-type(1)'.format(
             section_index
         )
 
@@ -173,8 +173,8 @@ class CourseNavPage(PageObject):
         That's true right after we click the section/subsection, but not true in general
         (the user could go to a section, then expand another tab).
         """
-        current_section_list = self.q(css='nav .chapter.is-open .group-heading').text
-        current_subsection_list = self.q(css='nav .chapter-content-container .menu-item.active a p').text
+        current_section_list = self.q(css='.course-navigation .chapter.is-open .group-heading').text
+        current_subsection_list = self.q(css='.course-navigation .chapter-content-container .menu-item.active a p').text
 
         if len(current_section_list) == 0:
             self.warning("Could not find the current section")
diff --git a/common/test/acceptance/tests/lms/test_lms.py b/common/test/acceptance/tests/lms/test_lms.py
index cf20ee8efe..7a945b74ed 100644
--- a/common/test/acceptance/tests/lms/test_lms.py
+++ b/common/test/acceptance/tests/lms/test_lms.py
@@ -1121,7 +1121,7 @@ class EntranceExamTest(UniqueCourseTest):
             When I view the courseware that has an entrance exam
             Then there should be an "Entrance Exam" chapter.'
         """
-        entrance_exam_link_selector = '#accordion nav .chapter .group-heading'
+        entrance_exam_link_selector = '.accordion .course-navigation .chapter .group-heading'
         # visit courseware page and make sure there is not entrance exam chapter.
         self.courseware_page.visit()
         self.courseware_page.wait_for_page()
diff --git a/lms/static/js/fixtures/accordion.html b/lms/static/js/fixtures/accordion.html
index 4bf0afd568..ae3f8bcbb4 100644
--- a/lms/static/js/fixtures/accordion.html
+++ b/lms/static/js/fixtures/accordion.html
@@ -1,5 +1,5 @@
 <div class="course-wrapper">
-  <div id="accordion">
+  <div class="accordion">
     <button class="button-chapter chapter" aria-controls="accordion-menu-1" aria-pressed="true">
       <h3 class="group-heading">
           Introduction Chapter
diff --git a/lms/static/js/spec/navigation_spec.js b/lms/static/js/spec/navigation_spec.js
index 90a0173df6..85e37fd588 100644
--- a/lms/static/js/spec/navigation_spec.js
+++ b/lms/static/js/spec/navigation_spec.js
@@ -7,7 +7,7 @@ define(['jquery', 'js/utils/navigation'], function($) {
         beforeEach(function() {
             loadFixtures('js/fixtures/accordion.html');
 
-            accordion = $('#accordion');
+            accordion = $('.accordion');
             button = accordion.children('.button-chapter');
             heading = button.children('.group-heading');
             chapterContent = accordion.children('.chapter-content-container');
diff --git a/lms/static/js/utils/navigation.js b/lms/static/js/utils/navigation.js
index 5f212697cb..1ba70581f1 100644
--- a/lms/static/js/utils/navigation.js
+++ b/lms/static/js/utils/navigation.js
@@ -6,7 +6,7 @@ var edx = edx || {},
 
             init: function() {
 
-                if ($('#accordion').length) {
+                if ($('.accordion').length) {
 
                     navigation.openAccordion();
                 }
@@ -18,15 +18,15 @@ var edx = edx || {},
             },
 
             checkForCurrent: function() {
-                var active = $('#accordion .chapter-content-container .chapter-menu:has(.active)').index('#accordion .chapter-content-container .chapter-menu') ? $('#accordion .chapter-content-container .chapter-menu:has(.active)').index('#accordion .chapter-content-container .chapter-menu') : 0,
-                    activeSection = $('#accordion .button-chapter:eq(' + active + ')');
+                var active = $('.accordion .chapter-content-container .chapter-menu:has(.active)').index('.accordion .chapter-content-container .chapter-menu') ? $('.accordion .chapter-content-container .chapter-menu:has(.active)').index('.accordion .chapter-content-container .chapter-menu') : 0,
+                    activeSection = $('.accordion .button-chapter:eq(' + active + ')');
 
                 navigation.closeAccordions();
                 navigation.openAccordionSection(activeSection);
             },
 
             listenForClick: function() {
-                $('#accordion').on('click', '.button-chapter', function(event) {
+                $('.accordion').on('click', '.button-chapter', function(event) {
                     navigation.closeAccordions();
                     navigation.openAccordionSection(event.currentTarget);
                 });
@@ -36,7 +36,7 @@ var edx = edx || {},
                 $('.chapter-content-container').hide();
                 $('.chapter-content-container .chapter-menu').hide();
 
-                $('#accordion .button-chapter').each(function(event) {
+                $('.accordion .button-chapter').each(function(event) {
                     var el = $(this);
 
                     el.removeClass('is-open').attr('aria-pressed', 'false');
diff --git a/lms/static/sass/course/courseware/_courseware.scss b/lms/static/sass/course/courseware/_courseware.scss
index 6d4b0d6175..345c0931d2 100644
--- a/lms/static/sass/course/courseware/_courseware.scss
+++ b/lms/static/sass/course/courseware/_courseware.scss
@@ -516,7 +516,7 @@ div.course-wrapper {
         }
       }
 
-      div#accordion {
+      .accordion {
         visibility: hidden;
         width: 10px;
         padding: 0;
@@ -524,11 +524,6 @@ div.course-wrapper {
         nav {
           white-space: pre;
           overflow: hidden;
-
-          ul {
-            overflow: hidden;
-            white-space: nowrap;
-          }
         }
       }
     }
diff --git a/lms/static/sass/course/courseware/_sidebar.scss b/lms/static/sass/course/courseware/_sidebar.scss
index 2805c189bd..cbd69eac07 100644
--- a/lms/static/sass/course/courseware/_sidebar.scss
+++ b/lms/static/sass/course/courseware/_sidebar.scss
@@ -1,19 +1,18 @@
 .course-index {
-    @extend .sidebar;
-    @extend .tran;
+    @include transition( all .2s $ease-in-out-quad 0s);
     @include border-right(1px solid $border-color-2);
     @include border-radius(3px, 0, 0, 3px);
+    display: table-cell; // needed to extend the sidebar the full height of the area
 
     // reseting bolded fonts for the course index
     h3 {
         font-weight: normal;
     }
 
-    #accordion {
+    .accordion {
         @extend %t-copy-sub1;
-        width: auto;
 
-        nav {
+        .course-navigation {
 
             .button-chapter {
                 @include box-sizing(border-box);
diff --git a/lms/templates/courseware/courseware.html b/lms/templates/courseware/courseware.html
index 506acfad6b..28b70cccad 100644
--- a/lms/templates/courseware/courseware.html
+++ b/lms/templates/courseware/courseware.html
@@ -183,8 +183,8 @@ ${fragment.foot_html()}
         </div>
       % endif
 
-      <div id="accordion">
-        <nav aria-label="${_('Course Navigation')}">
+      <div class="accordion">
+        <nav class="course-navigation" aria-label="${_('Course Navigation')}">
           % if accordion.strip():
             ${accordion}
           % else:
diff --git a/lms/templates/instructor/instructor_dashboard_2/e-commerce.html b/lms/templates/instructor/instructor_dashboard_2/e-commerce.html
index 5a0daee732..0b1c7665df 100644
--- a/lms/templates/instructor/instructor_dashboard_2/e-commerce.html
+++ b/lms/templates/instructor/instructor_dashboard_2/e-commerce.html
@@ -204,11 +204,11 @@ import pytz
            activeHeader: "ui-icon-carat-1-s"
        };
        var act = 0;
-       $("#accordion").accordion(
+       $(".accordion").accordion(
                {
                    heightStyle: 'content',
                    activate: function(event, ui) {
-                    var active = jQuery("#accordion").accordion('option', 'active');
+                    var active = jQuery(".accordion").accordion('option', 'active');
                     $.cookie('saved_index', null);
                     $.cookie('saved_index', active);
                     $('#error-msg').val('');