MDL-71828 courseformat: course index section link toggler

course/format/amd/src/local/courseindex/courseindex.js

@@ -49,6 +49,7 @@ export default class Component extends BaseComponent {
             SECTIONHIDDEN: 'dimmed',
             CMHIDDEN: 'dimmed',
             SECTIONCURRENT: 'current',
+            COLLAPSED: `collapsed`,
         };
         // Arrays to keep cms and sections elements.
         this.sections = {};
@@ -111,8 +112,10 @@ export default class Component extends BaseComponent {
     _setupSectionTogglers(event) {
         const sectionlink = event.target.closest(this.selectors.TOGGLER);
         if (sectionlink) {
-            event.preventDefault();
-            sectionlink.parentNode.querySelector(this.selectors.COLLAPSE).click();
+            const toggler = sectionlink.parentNode.querySelector(this.selectors.COLLAPSE);
+            if (toggler?.classList.contains(this.classes.COLLAPSED)) {
+                toggler.click();
+            }
         }
     }
 

course/format/tests/behat/course_courseindex.feature

@@ -112,20 +112,47 @@ Feature: Course index depending on role
     And I am on "Course 1" course homepage
     And I click on "Side panel" "button"
     When I click on "Open course index drawer" "button"
+    # Sections should be opened by default.
     Then I should see "Topic 1" in the "courseindex-content" "region"
     And I should see "Activity sample 1" in the "courseindex-content" "region"
     And I should see "Second activity in section 1" in the "courseindex-content" "region"
-    And I click on "Topic 1" "link" in the "courseindex-content" "region"
-    And I should not see "Activity sample 1" in the "courseindex-content" "region"
-    And I should not see "Second activity in section 1" in the "courseindex-content" "region"
     And I should see "Topic 2" in the "courseindex-content" "region"
     And I should see "Activity sample 2" in the "courseindex-content" "region"
-    And I click on "Topic 2" "link" in the "courseindex-content" "region"
-    And I should not see "Activity sample 2" in the "courseindex-content" "region"
     And I should see "Topic 3" in the "courseindex-content" "region"
     And I should see "Activity sample 3" in the "courseindex-content" "region"
-    And I click on "Topic 3" "link" in the "courseindex-content" "region"
-    And I should not see "Activity sample 3" in the "courseindex-content" "region"
+    # Collapse a section 1 via chevron.
+    And I click on "Collapse" "link" in the ".courseindex-section[data-number='1']" "css_element"
+    And I should see "Topic 1" in the "courseindex-content" "region"
     And I should not see "Activity sample 1" in the "courseindex-content" "region"
     And I should not see "Second activity in section 1" in the "courseindex-content" "region"
+    And I should see "Topic 2" in the "courseindex-content" "region"
+    And I should see "Activity sample 2" in the "courseindex-content" "region"
+    And I should see "Topic 3" in the "courseindex-content" "region"
+    And I should see "Activity sample 3" in the "courseindex-content" "region"
+    # Uncollapse section 1 via Topic name.
+    And I click on "Topic 1" "link" in the "courseindex-content" "region"
+    And I should see "Topic 1" in the "courseindex-content" "region"
+    And I should see "Activity sample 1" in the "courseindex-content" "region"
+    And I should see "Second activity in section 1" in the "courseindex-content" "region"
+    And I should see "Topic 2" in the "courseindex-content" "region"
+    And I should see "Activity sample 2" in the "courseindex-content" "region"
+    And I should see "Topic 3" in the "courseindex-content" "region"
+    And I should see "Activity sample 3" in the "courseindex-content" "region"
+    # Collapse a section 2 via chevron.
+    And I click on "Collapse" "link" in the ".courseindex-section[data-number='2']" "css_element"
+    And I should see "Topic 1" in the "courseindex-content" "region"
+    And I should see "Activity sample 1" in the "courseindex-content" "region"
+    And I should see "Second activity in section 1" in the "courseindex-content" "region"
+    And I should see "Topic 2" in the "courseindex-content" "region"
     And I should not see "Activity sample 2" in the "courseindex-content" "region"
+    And I should see "Topic 3" in the "courseindex-content" "region"
+    And I should see "Activity sample 3" in the "courseindex-content" "region"
+    # Uncollapse section 2 via chevron.
+    And I click on "Expand" "link" in the ".courseindex-section[data-number='2']" "css_element"
+    And I should see "Topic 1" in the "courseindex-content" "region"
+    And I should see "Activity sample 1" in the "courseindex-content" "region"
+    And I should see "Second activity in section 1" in the "courseindex-content" "region"
+    And I should see "Topic 2" in the "courseindex-content" "region"
+    And I should see "Activity sample 2" in the "courseindex-content" "region"
+    And I should see "Topic 3" in the "courseindex-content" "region"
+    And I should see "Activity sample 3" in the "courseindex-content" "region"