diff --git a/example/source/nested-page/another-nested-nested-page/index.html.md b/example/source/nested-page/another-nested-nested-page/index.html.md
new file mode 100644
index 00000000..2cac582c
--- /dev/null
+++ b/example/source/nested-page/another-nested-nested-page/index.html.md
@@ -0,0 +1,5 @@
+---
+title: Another nested nested page
+---
+
+# Another nested nested page
diff --git a/lib/assets/javascripts/_modules/collapsible-navigation.js b/lib/assets/javascripts/_modules/collapsible-navigation.js
index 56cf5309..d7e8d65d 100644
--- a/lib/assets/javascripts/_modules/collapsible-navigation.js
+++ b/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) {
diff --git a/spec/javascripts/collapsible-navigation-spec.js b/spec/javascripts/collapsible-navigation-spec.js
new file mode 100644
index 00000000..6105fa3c
--- /dev/null
+++ b/spec/javascripts/collapsible-navigation-spec.js
@@ -0,0 +1,36 @@
+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)
+    })
+  })
+
+})