AnsweredAssumed Answered

Accordion Script Help

Question asked by Nick Yamagata on Jun 25, 2019
Latest reply on Jul 5, 2019 by Nick Yamagata

Our designers have developed some accordion scripts for instructors to use in their courses. We recently updated the script when jquery was disabled, things were going swimmingly with the new script until the 6-22 update last weekend.

 

A quick dump of our code here:
//Global Javascript

let accordion = document.getElementsByClassName("accordion");
let i;

for (i = 0; i < accordion.length; i++) {
  accordion[i].addEventListener("click", function() {
    this.classList.toggle("active");
    let panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}
/*Global CSS classes*/

.accordion:hover,.active {
    background-color: #e8e8e8
}

.accordionPanel {
    padding: 0 1em;
    background-color: #fff;
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s ease-out
}
<!-- In Course HTML use -->
<h2 class="accordion">Heading 1</h2>
<div class="accordionPanel">
  <p>Heading 1 content goes between the div tags.</p>
</div>
<h2 class="accordion">Heading 2</h2>
<div class="accordionPanel">
  <p>Heading 2 content goes between the div tags.</p>
</div>
<h2 class="accordion">Heading 3</h2>
<div class="accordionPanel">
  <p>Heading 3 content goes between the div tags.</p>
</div>

 

I've done some inspecting and I wouldn't say I am a javascript pro, but I know I can F12 and look at how the page is applying the styles and watch the javascript in action, it doesn't seem to be detecting the mouse click to toggle the active attribute, but it does detect :hover. The strangest thing by far is that our accordion code still works totally fine everywhere except user created Pages (that is, with as deep as my testing has gone so far).

 

Does anyone else use accordions in your Canvas environments or similar CSS Javascript and are you seeing the same issue? Is there anything I might be missing in our javascript, or suggestions on working code?

Outcomes