Make sure IDs on collapsible navigation are unique

Multiple nested pages were getting assigned the same ID (from the parent). This change
appends the iterator index to the elements to make sure they're unique.
Also added a extra nested page to the example docs and a test.

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+- [Pull request #160: Make sure IDs on collapsible navigation are unique](https://github.com/alphagov/tech-docs-gem/pull/160)
+
 ## 2.0.9
 
 ### Fixes

example/source/nested-page/another-nested-nested-page/index.html.md

@@ -0,0 +1,5 @@
+---
+title: Another nested nested page
+---
+
+# Another nested nested page

lib/assets/javascripts/_modules/collapsible-navigation.js

@@ -28,9 +28,11 @@
           continue
         }
         $topLevelItem.addClass('collapsible')
-        $listing.addClass('collapsible__body')
-          .attr('id', id)
-          .attr('aria-expanded', 'false')
+        $listing.each(function (i) {
+          $(this).addClass('collapsible__body')
+            .attr('id', id + '-' + i)
+            .attr('aria-expanded', 'false')
+        })
         $heading.addClass('collapsible__heading')
           .after('<button class="collapsible__toggle" aria-controls="' + id + '"><span class="collapsible__toggle-label">Expand ' + $heading.text() + '</span><span class="collapsible__toggle-icon" aria-hidden="true"></button>')
         $topLevelItem.on('click', '.collapsible__toggle', function (e) {

spec/javascripts/collapsible-navigation-spec.js

@@ -0,0 +1,35 @@
+describe('Collapsible navigation', function () {
+  'use strict'
+
+  var module
+  var $navigation
+
+  beforeEach(function () {
+    module = new GOVUK.Modules.CollapsibleNavigation()
+    $navigation = $(`
+      <nav id="toc" class="js-toc-list toc__list" aria-labelledby="toc-heading" data-module="collapsible-navigation">
+        <ul>
+          <li>
+            <a href="/nested-page/"><span>Nested page</span></a>
+            <ul>
+              <li>
+                <a href="/nested-page/another-nested-page/#another-nested-page"><span>Another nested page</span></a>
+              </li>
+            </ul>
+            <ul>
+              <li>
+                <a href="/nested-page/another-nested-nested-page/#another-nested-nested-page"><span>Another nested nested page</span></a>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </nav>`)
+    module.start($navigation)
+  })
+
+  it('sanitizes headings to unique IDs correctly', function () {
+    $navigation.find('ul > li > ul').each(function (i) {
+      expect($(this)[0].id).toEqual('toc-nested-page-' + i)
+    })
+  })
+})