I added a content editor webpart and added some code to it by linking it to an HTML file. I copied the code from https://codepen.io/heydon/pen/ZXgqKG It is a collapsible section web component with expand/collapse all buttons.
This code works when I test it in my Brackets software however, when I import it into SharePoint the menu keeps opening and closing immediately when i click the “expand all” button. It must stay open when clicked and close when I click the “collapse all” button.
Thank you in advance for your time and consideration!
<html> <head> <style> .wrapper { margin: 0 auto; max-width: 50em; min-width: 18.75em; } header, main, footer { display: block; text-align: center } h1, h2, h3 { font-family: Verdana, serif; color: #545f1d; font-weight: lighter; } h1 { font-size: 4em; } h2 { font-size: 1.3em; text-align: left; } p { text-align: justify; font: 12pt/1.5 Verdana, Arial, Helvetica, "Luxi Serif", sans-serif; color: #000; } /* button styling */ .controls { text-align: right; margin-bottom: 1em; } .controls li { display: inline; } button { background: green; color: #fff; border: 0; font-size: 0.85rem; border-radius: 0.25rem; } /* Custom elements are inline by default */ toggle-section { display: block; } /* Only applies if script runs and `role="region"` is added */ toggle-section[role="region"] { border-width: 2px 0; border-style: solid; } toggle-section[role="region"] + toggle-section { border-top: 0; } </style> <main> <div class="wrapper"> <toggle-section open="false"> <h2 id="section-1">Section 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non lectus sit amet nunc facilisis molestie. Praesent quis libero et mauris facilisis dignissim at sed nisi.</p> <p>Nullam efficitur porttitor lectus, ac finibus nibh fermentum ac. Phasellus aliquam, nibh non efficitur pharetra, tellus diam posuere lectus, a consequat elit ex nec ligula.</p> </toggle-section> <toggle-section open="false"> <h2 id="section-2">Section 2</h2> <p>Aliquam erat volutpat. Nulla facilisi. Nunc porttitor, elit non eleifend aliquam, est leo scelerisque nibh, nec faucibus odio urna ac nulla.</p> <p>Maecenas laoreet in metus eget convallis. Vivamus at eleifend felis. Proin non vehicula neque. Etiam eleifend sapien ut nulla malesuada, ac condimentum nisl efficitur.</p> </toggle-section> </div> </main> <script type="text/javascript"> (function() { // Check for <template> support if ('content' in document.createElement('template')) { const tmpl = document.createElement('template') // Create the web component's template // featuring a <slot> for the Light DOM content tmpl.innerHTML = ` <h2> <button aria-expanded="false"> <svg aria-hidden="true" focusable="false" viewBox="0 0 10 10"> <rect class="vert" height="8" width="2" y="1" x="4"/> <rect height="2" width="8" y="4" x="1"/> </svg> </button> </h2> <div class="content" hidden> <slot></slot> </div> <style> h2 { margin: 0; } h2 button { all: inherit; box-sizing: border-box; display: flex; justify-content: space-between; width: 100%; padding: 0.5em 0; } h2 button:focus svg { outline: 2px solid; } button svg { height: 1em; margin-left: 0.5em; } [aria-expanded="true"] .vert { display: none; } [aria-expanded] rect { fill: currentColor; } </style> ` // Check for latest Shadow DOM syntax support if (document.head.attachShadow) { class ToggleSection extends HTMLElement { constructor() { super() // Make the host element a region this.setAttribute('role', 'region') // Create a `shadowRoot` and populate from template this.attachShadow({ mode: 'open' }) this.shadowRoot.appendChild(tmpl.content.cloneNode(true)) // Assign the toggle button this.btn = this.shadowRoot.querySelector('h2 button') // Get the first element in Light DOM const oldHeading = this.querySelector(':first-child') // and cast its heading level (which should, but may not, exist) let level = parseInt(oldHeading.tagName.substr(1)) // Then take its `id` (may be null) let id = oldHeading.id // Get the Shadow DOM <h2> this.heading = this.shadowRoot.querySelector('h2') // If `id` exists, apply it if (id) { this.heading.id = id } // If there is no level, there is no heading. // Add a warning. if (!level) { console.warn('The first element inside each <toggle-section> should be a heading of an appropriate level.') } // If the level is a real integer but not 2 // set `aria-level` accordingly if (level && level !== 2) { this.heading.setAttribute('aria-level', level) } // Add the Light DOM heading label to the innerHTML of the toggle button // and remove the now unwanted Light DOM heading this.btn.innerHTML = oldHeading.textContent + this.btn.innerHTML oldHeading.parentNode.removeChild(oldHeading) // The main state switching function this.switchState = () => { let expanded = this.getAttribute('open') === 'true' || false // Toggle `aria-expanded` this.btn.setAttribute('aria-expanded', expanded) // Toggle the `.content` element's visibility this.shadowRoot.querySelector('.content').hidden = !expanded } this.btn.onclick = () => { // Change the component's `open` attribute value on click let open = this.getAttribute('open') === 'true' || false this.setAttribute('open', open ? 'false' : 'true') // Update the hash if the collapsible section's // heading has an `id` and we are opening, not closing if (this.heading.id && !open) { history.pushState(null, null, '#' + this.heading.id) } } } connectedCallback() { if (window.location.hash.substr(1) === this.heading.id) { this.setAttribute('open', 'true') this.btn.focus() } } // Identify just the `open` attribute as an observed attribute static get observedAttributes() { return ['open'] } // When `open` changes value, execute switchState() attributeChangedCallback(name) { if (name === 'open') { this.switchState() } } } // Add our new custom element to the window for use window.customElements.define('toggle-section', ToggleSection) // Define the expand/collapse all template const buttons = document.createElement('div') buttons.innerHTML = ` <ul class="controls" aria-label="section controls"> <li><button id="expand">expand all</button></li> <li><button id="collapse">collapse all</button></li> </ul> ` // Get the first `toggle-section` on the page // and all toggle sections as a node list const first = document.querySelector('toggle-section') const all = document.querySelectorAll('toggle-section') // Insert the button controls before the first <toggle-section> first.parentNode.insertBefore(buttons, first) // Place the click on the parent <ul>... buttons.addEventListener('click', (e) => { // ...then determine which button was the target let expand = e.target.id === 'expand' ? true : false // Iterate over the toggle sections to switch // each one's state uniformly Array.prototype.forEach.call(all, (t) => { t.setAttribute('open', expand) }) }) } } })() </script>
