https://www.newcastle-hospitals.nhs.uk/wp-content/themes/newcastle…/core/nav-mobile-primary/index.js

1/**
2 * Nav mobile primary accordion
3 *
4 * This JS allows users to toggle mobile menu accordion content open and closed
5 */
6var accordions = document.querySelectorAll('.nav-mobile-primary__item--parent');
7var navToggle = document.getElementById('js-toggle-nav');
8var mobileNav = document.getElementById('js-mobile-nav');
9
10var mobileMegaAccordion = function () {
11    // Set up all nav mobile primary accordions on the page
12    accordions.forEach(function (accordion, i) {
13        // Set accordion ID
14        var accordionID = 'nav-mobile-primary-accordion-' + (i + 1);
15        accordion.setAttribute('id', accordionID);
16
17        // Get the accordion button/heading
18        var accordionButton = accordion.querySelector('.nav-mobile-primary__link--button');
19        // Get dropdown content
20        var accordionContent = accordion.querySelector('.nav-mobile-primary__dropdown');
21
22        // Create a unique ID for the content which we are controlling
23        var accordionContentID = 'nav-mobile-primary-content-' + (i + 1);
24        accordionContent.setAttribute('id', accordionContentID);
25        accordionButton.setAttribute('aria-controls', accordionContentID);
26
27        // Initialise accordion as minimised
28        accordionButton.setAttribute('aria-expanded', 'false');
29        accordion.classList.add('nav-mobile-primary__item--minimised');
30
31        // Set content to hidden
32        accordionContent.hidden = true;
33
34        // Toggle visibility
35        accordionButton.onclick = function () {
36            var expanded = accordionButton.getAttribute('aria-expanded') === 'true' || false;
37
38            accordion.classList.toggle('nav-mobile-primary__item--minimised');
39            accordionButton.setAttribute('aria-expanded', !expanded);
40            accordionContent.hidden = expanded;
41
42            // Prevent accordion button from being outside viewport when closing other accordions
43            accordion.scrollIntoView();
44
45            // Close all other accordions but the current accordion
46            accordions.forEach(function (accordion) {
47                // Check if the accordion is not the current accordion and it isn't minimised
48                if (
49                    accordion.id !== accordionID &&
50                    !accordion.classList.contains('nav-mobile-primary__item--minimised')
51                ) {
52                    // Update attributes to minimised and hidden
53                    accordionButton.setAttribute('aria-expanded', 'false');
54                    accordion.classList.add('nav-mobile-primary__item--minimised');
55                    accordionContent.hidden = true;
56                }
57            });
58        };
59    });
60    return;
61};
62
63/**
64 * Close all accordions if the mobile nav is not open
65 */
66var toggleAllAccordionsOff = function () {
67    // If the mobile nav is not open then close our mobile menu accordions
68    if (!navToggle.classList.contains('open')) {
69        accordions.forEach(function (accordion) {
70            var accordionButton = accordion.querySelector('.nav-mobile-primary__link--button');
71            var accordionContent = accordion.querySelector('.nav-mobile-primary__dropdown');
72
73            accordionButton.setAttribute('aria-expanded', 'false');
74            accordion.classList.add('nav-mobile-primary__item--minimised');
75            accordionContent.hidden = true;
76        });
77    }
78};
79
80// Listen for mobile nav toggle events and toggle accordions
81if (mobileNav) {
82    navToggle.addEventListener('click', toggleAllAccordionsOff);
83}
84
85mobileMegaAccordion();