0

I recently added a Content Editor Webpart with code for an accordion. When I'm using it in on the page in edit mode, there are no issues. For reference, the end of the URL looks like this: /sites/JI/SitePages/Home.aspx

But when I go to the published page (URL like this: /sites/JI/_layouts/15/start.aspx#/SitePages/Home.aspx), the accordion no longer works. The color still changes when I hover over sections, but clicking has no effect.

Here's a stripped copy of the HTML:

<style>
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

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

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>

<h2>Header</h2>
<p>Lorem ipsum dolor sit</p>
<button class="accordion" type="button">JI Purchasing Instructions</button>
<div class="panel">
  <p><a href="linkhere">link name</a>Lorem ipsum dolor sit</p>
</div>

<button class="accordion" type="button">Button Name</button>
<div class="panel">
  <p> <ul>
   <li><a href="link"> linkname</a></li>
   <li><a href="link"> Link Name</a></li>
   <li><a href="link"> Linkname</a></li>
</ul> </p>
</div>

<button class="accordion" type="button">Buttonname</button>
<div class="panel">
  <p>Lorem ipsum dolor sit
    <ul> 
    <li><a href="Link"> Linkname</a></li>
    <li>Link to <a href="link"> linkname</a>
  </p>
</div>

<button class="accordion" type="button">button name</button>
<div class="panel">
  <p> <ul>
    <li><a href="link"> Link Name</a></li>
    <li><a href="link"> Link Name</a></li>
    <li><a href="link"> Link name</a></li>
</p>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
</script>
Improve this question
11
  • By "HTML WebPart", I assume you are using the "Content Editor WebPart"? Also, which version of SharePoint are you using?
    – willman
    Commented Jan 22, 2020 at 16:12
  • I'm using Sharepoint 2016. By "HTML WebPart", I do mean the Content Editor WebPart. I'm putting in the HTML with the Form Content Editor.
    – jEB
    Commented Jan 22, 2020 at 16:19
  • can you post your html content, kind of hard to troubleshoot or debug without a copy
    – willman
    Commented Jan 22, 2020 at 16:24
  • I edited it into the main post.
    – jEB
    Commented Jan 22, 2020 at 16:52
  • Related? sharepoint.stackexchange.com/a/123536/8992
    – Dylan Cristy
    Commented Jan 22, 2020 at 17:12

2 Answers 2

Reset to default
1

As Dylan Cristy mentioned in the comments, the issue ended up being MDS (Minimal Download Strategy). As soon as I disabled that, the accordion started working.

Improve this answer
0

The html and script that you put in a Content Editor Web Part is being embedded on a containing page, and thus your content should not include a <DocType>, <Body>, or <Head> elements. Try using the following: 

<style>
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

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

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>

<h2>Header</h2>
<p>Lorem ipsum dolor sit</p>
<button class="accordion" type="button">JI Purchasing Instructions</button>
<div class="panel">
  <p><a href="linkhere">link name</a>Lorem ipsum dolor sit</p>
</div>

<button class="accordion" type="button">Button Name</button>
<div class="panel">
  <p> <ul>
   <li><a href="link"> linkname</a></li>
   <li><a href="link"> Link Name</a></li>
   <li><a href="link"> Linkname</a></li>
</ul> </p>
</div>

<button class="accordion" type="button">Buttonname</button>
<div class="panel">
  <p>Lorem ipsum dolor sit
    <ul> 
    <li><a href="Link"> Linkname</a></li>
    <li>Link to <a href="link"> linkname</a>
  </p>
</div>

<button class="accordion" type="button">button name</button>
<div class="panel">
  <p> <ul>
    <li><a href="link"> Link Name</a></li>
    <li><a href="link"> Link Name</a></li>
    <li><a href="link"> Link name</a></li>
</p>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
</script>
Improve this answer
1
  • That doesn't seem to make a difference. It works just fine on the SitePages url, but not with the _layouts url.
    – jEB
    Commented Jan 22, 2020 at 17:22

Not the answer you're looking for? Browse other questions tagged or ask your own question.