diff --git a/cms/static/js/base.js b/cms/static/js/base.js
index 888fcef5b8..086a535994 100644
--- a/cms/static/js/base.js
+++ b/cms/static/js/base.js
@@ -41,7 +41,12 @@ $(document).ready(function() {
$('.unit .item-actions .delete-button').bind('click', deleteUnit);
$('.new-unit-item').bind('click', createNewUnit);
- $('.collapse-all-button').bind('click', collapseAll);
+ // toggling overview section details
+ $(function(){
+ if($('.courseware-section').length > 0) {
+ $('.toggle-button-sections').addClass('is-shown');
+ }
+ });
$('.toggle-button-sections').bind('click', toggleSections);
// autosave when a field is updated on the subsection page
@@ -135,13 +140,17 @@ function toggleSections(e) {
e.preventDefault();
$section = $('.courseware-section');
+ sectionCount = $section.length;
$button = $(this);
$labelCollapsed = $('up Collapse All Sections');
$labelExpanded = $('down Expand All Sections');
- $section.toggleClass('collapsed');
- var buttonLabel = $section.hasClass('collapsed') ? $labelExpanded : $labelCollapsed;
- $button.toggleClass('is-activated').html(buttonLabel);
+ if (sectionCount > 0) {
+ $section.toggleClass('collapsed');
+ $section.find('.expand-collapse-icon').toggleClass('collapse expand');
+ var buttonLabel = $section.hasClass('collapsed') ? $labelExpanded : $labelCollapsed;
+ $button.toggleClass('is-activated').html(buttonLabel);
+ }
}
function editSectionPublishDate(e) {
diff --git a/cms/static/sass/_courseware.scss b/cms/static/sass/_courseware.scss
index 6a8be8e5ea..2fe4605a33 100644
--- a/cms/static/sass/_courseware.scss
+++ b/cms/static/sass/_courseware.scss
@@ -422,6 +422,14 @@ input.courseware-unit-search-input {
float: left;
margin: 29px 6px 16px 16px;
@include transition(none);
+
+ &.expand {
+ background-position: 0 0;
+ }
+
+ &.collapsed {
+
+ }
}
.drag-handle {
@@ -501,18 +509,8 @@ input.courseware-unit-search-input {
}
}
-.collapse-all-button {
- float: right;
- margin-top: 10px;
- font-size: 13px;
- color: $darkGrey;
-
- .collapse-all-icon {
- margin-right: 6px;
- }
-}
-
.toggle-button-sections {
+ display: none;
position: relative;
float: right;
margin-top: 10px;
@@ -520,6 +518,10 @@ input.courseware-unit-search-input {
font-size: 13px;
color: $darkGrey;
+ &.is-shown {
+ display: block;
+ }
+
.ss-icon {
@include border-radius(20px);
position: relative;