MDL-82679 course: Prevent collapsable sections conflicting

.upgradenotes/MDL-82679-2025013012260250.yml

@@ -0,0 +1,14 @@
+issueNumber: MDL-82679
+notes:
+  core_courseformat:
+    - message: >-
+        HTML IDs relating to section collapse/expand have been changed in the
+        course format templates.
+
+        - core_courseformat/local/content/section/header
+        #collapssesection{{num}} has been changed to #collapsesectionid{{id}}
+
+        - core_courseformat/local/content/section/content
+        #coursecontentcollapse{{num}} had been changed to
+        #coursecontentcollapseid{{id}}
+      type: fixed

course/format/templates/local/content/section/content.mustache

@@ -161,7 +161,7 @@
         {{/headerdisplaymultipage}}
     {{/header}}
 </div>
-<div id="coursecontentcollapse{{num}}"
+<div id="coursecontentcollapseid{{id}}"
      class="content {{^iscoursedisplaymultipage}}{{^sitehome}}{{^displayonesection}}course-content-item-content collapse {{^contentcollapsed}}show{{/contentcollapsed}}{{/displayonesection}}{{/sitehome}}{{/iscoursedisplaymultipage}}">
     <div class="{{#hasavailability}}description{{/hasavailability}} my-3" data-for="sectioninfo">
         {{#isstealth}}

course/format/templates/local/content/section/header.mustache

@@ -55,10 +55,10 @@
                 <a role="button"
                     data-toggle="collapse"
                     data-for="sectiontoggler"
-                    href="#coursecontentcollapse{{num}}"
-                    id="collapssesection{{num}}"
+                    href="#coursecontentcollapseid{{id}}"
+                    id="collapsesectionid{{id}}"
                     aria-expanded="{{^contentcollapsed}}true{{/contentcollapsed}}{{#contentcollapsed}}false{{/contentcollapsed}}"
-                    aria-controls="coursecontentcollapse{{num}}"
+                    aria-controls="coursecontentcollapseid{{id}}"
                     class="btn btn-icon me-3 icons-collapse-expand justify-content-center
                         {{#contentcollapsed}} collapsed {{/contentcollapsed}}"
                     aria-label="{{name}}">

course/format/tests/behat/content_preferences.feature

@@ -37,7 +37,7 @@ Feature: Course content collapsed user preferences
     And I should see "Activity sample 2" in the "region-main" "region"
     And I should see "Section 3" in the "region-main" "region"
     And I should see "Activity sample 3" in the "region-main" "region"
-    And I click on "#collapssesection1" "css_element"
+    And I click on "Collapse" "link" in the "Section 1" "section"
     When I reload the page
     Then I should see "Section 1" in the "region-main" "region"
     And I should not see "Activity sample 1" in the "region-main" "region"
@@ -45,7 +45,7 @@ Feature: Course content collapsed user preferences
     And I should see "Activity sample 2" in the "region-main" "region"
     And I should see "Section 3" in the "region-main" "region"
     And I should see "Activity sample 3" in the "region-main" "region"
-    And I click on "#collapssesection2" "css_element"
+    And I click on "Collapse" "link" in the "Section 2" "section"
     And I reload the page
     And I should see "Section 1" in the "region-main" "region"
     And I should not see "Activity sample 1" in the "region-main" "region"
@@ -53,7 +53,7 @@ Feature: Course content collapsed user preferences
     And I should not see "Activity sample 2" in the "region-main" "region"
     And I should see "Section 3" in the "region-main" "region"
     And I should see "Activity sample 3" in the "region-main" "region"
-    And I click on "#collapssesection3" "css_element"
+    And I click on "Collapse" "link" in the "Section 3" "section"
     And I reload the page
     And I should see "Section 1" in the "region-main" "region"
     And I should not see "Activity sample 1" in the "region-main" "region"
@@ -61,12 +61,12 @@ Feature: Course content collapsed user preferences
     And I should not see "Activity sample 2" in the "region-main" "region"
     And I should see "Section 3" in the "region-main" "region"
     And I should not see "Activity sample 3" in the "region-main" "region"
-    And I click on "#collapssesection2" "css_element"
-    And I click on "#collapssesection3" "css_element"
+    And I click on "Expand" "link" in the "Section 2" "section"
+    And I click on "Expand" "link" in the "Section 3" "section"
     And I reload the page
     And I should see "Section 1" in the "region-main" "region"
     And I should not see "Activity sample 1" in the "region-main" "region"
-    And I click on "#collapssesection4" "css_element"
+    And I click on "Collapse" "link" in the "Section 4" "section"
     And I turn editing mode on
     And I delete section "1"
     And I click on "Delete" "button" in the ".modal" "css_element"

course/tests/behat/course_collapse_sections.feature

@@ -81,25 +81,25 @@ Feature: Collapse course sections
     And I should not see "Forum 4"
     And I should see "Not available" in the "#section-5" "css_element"
     And I should not see "Forum 5"
-    When I click on "#collapssesection3" "css_element"
+    When I click on "Collapse" "link" in the "Section 3" "section"
     And I should see "Assignment 1" in the "region-main" "region"
     And I should see "Assignment 2" in the "region-main" "region"
     And I should see "Book 2" in the "region-main" "region"
     And I should not see "Book 3" in the "region-main" "region"
-    And I click on "#collapssesection1" "css_element"
-    And I click on "#collapssesection2" "css_element"
-    And I click on "#collapssesection4" "css_element"
-    And I click on "#collapssesection5" "css_element"
+    And I click on "Collapse" "link" in the "Section 1" "section"
+    And I click on "Collapse" "link" in the "Section 2" "section"
+    And I click on "Collapse" "link" in the "Section 4" "section"
+    And I click on "Collapse" "link" in the "Section 5" "section"
     Then I should not see "Assignment 1" in the "region-main" "region"
     And I should not see "Assignment 2" in the "region-main" "region"
     And I should not see "Book 2" in the "region-main" "region"
     And I should not see "Book 3" in the "region-main" "region"
     And I should not see "Available until" in the "section-4" "core_availability > Section availability"
-    And I click on "#collapssesection1" "css_element"
-    And I click on "#collapssesection2" "css_element"
-    And I click on "#collapssesection3" "css_element"
-    And I click on "#collapssesection4" "css_element"
-    And I click on "#collapssesection5" "css_element"
+    And I click on "Expand" "link" in the "Section 1" "section"
+    And I click on "Expand" "link" in the "Section 2" "section"
+    And I click on "Expand" "link" in the "Section 3" "section"
+    And I click on "Expand" "link" in the "Section 4" "section"
+    And I click on "Expand" "link" in the "Section 5" "section"
     And I should see "Assignment 1" in the "region-main" "region"
     And I should see "Assignment 2" in the "region-main" "region"
     And I should see "Book 2" in the "region-main" "region"
@@ -118,26 +118,26 @@ Feature: Collapse course sections
     And I should see "Forum 4"
     And I should see "Hidden from students" in the "#section-5" "css_element"
     And I should see "Forum 5"
-    When I click on "#collapssesection3" "css_element"
+    And I click on "Collapse" "link" in the "15 May - 21 May" "section"
     And I should see "Assignment 1" in the "region-main" "region"
     And I should see "Assignment 2" in the "region-main" "region"
     And I should see "Book 2" in the "region-main" "region"
     And I should not see "Book 3" in the "region-main" "region"
-    And I click on "#collapssesection1" "css_element"
-    And I click on "#collapssesection2" "css_element"
-    And I click on "#collapssesection4" "css_element"
-    And I click on "#collapssesection5" "css_element"
+    And I click on "Collapse" "link" in the "1 May - 7 May" "section"
+    And I click on "Collapse" "link" in the "8 May - 14 May" "section"
+    And I click on "Collapse" "link" in the "22 May - 28 May" "section"
+    And I click on "Collapse" "link" in the "29 May - 4 June" "section"
     Then I should not see "Assignment 1" in the "region-main" "region"
     And I should not see "Assignment 2" in the "region-main" "region"
     And I should not see "Book 2" in the "region-main" "region"
     And I should not see "Book 3" in the "region-main" "region"
     And I should not see "Available until" in the "section-4" "core_availability > Section availability"
     And I should not see "Not available" in the "#section-5" "css_element"
-    And I click on "#collapssesection1" "css_element"
-    And I click on "#collapssesection2" "css_element"
-    And I click on "#collapssesection3" "css_element"
-    And I click on "#collapssesection4" "css_element"
-    And I click on "#collapssesection5" "css_element"
+    And I click on "Expand" "link" in the "1 May - 7 May" "section"
+    And I click on "Expand" "link" in the "8 May - 14 May" "section"
+    And I click on "Expand" "link" in the "15 May - 21 May" "section"
+    And I click on "Expand" "link" in the "22 May - 28 May" "section"
+    And I click on "Expand" "link" in the "29 May - 4 June" "section"
     And I should see "Assignment 1" in the "region-main" "region"
     And I should see "Assignment 2" in the "region-main" "region"
     And I should see "Book 2" in the "region-main" "region"