[The Knotty Celt]

I am trying to customize the design of my store. Specifically, I am trying to use a combination of styles, html, and script to change the way terms of use are displayed. Each section of the document is to be listed on a tab. Clicking that tab loads the relevant section. I have tested my styles, html, and script at w3schools.com, and everything works fine. Here is how I am trying to accomplish the task.


Custom CSS

/* Style the tab */

termtab {
  overflow: hidden;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f1f1f1;

}


/* Style the buttons inside the tab */
.termtab button {
  background-color: #fff;
  border: 1px solid #044105;
  color: #044105;
  border-radius: 5px;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.termtab button:hover {
  text-decoration: underline;
}

/* Create an active/current tablink class */
.termtab button.active {
  background-color: #044105;
  color: #fff;
}

/* Style the tab content */
.termtab-content {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  border-top: none;
}
 

HTML

<div class="termtab">
  <button class="termtab-links" onclick="openSection(event, 'section1')">Section 1</button>
  <button class="termtab-links" onclick="openSection(event, 'section2')">Section 2</button>
...
...
  <button class="termtab-links" onclick="openSection(event, 'section17')">Section 17</button>
</div>


<div id="section1" class="termtab-content">
  <h2>Section 1 Title</h2>
  <p>Section 1 contents</p>
</div>


<div id="section2" class="termtab-content">
  <h2>Section 2 Title</h2>
  <p>Section 2 contents</p>
</div>


...
...


<div id="section17" class="termtab-content">
  <h2>Section 17 Title</h2>
  <p>Section 17 contents</p>
</div>

Script

function openSection(evt, sectName) {
  var i, tabcontent, tablinks;
  tabcontent = document.GetElementsByClassName("termtab-content");
  for (i = 0; i < tabcontent.length; i++) {

    tabcontent[i].style.display = "none";
  }
  tablinks = document.GetElementsByClassName("termtab-links");
  for (i=0; i < tablinks.legnth; i++ {
    tablinks[i].className = tablinks[i].className.replace(" active","");
  }
  document.GetElementById(sectName).style.display = "block";
  evt.currentTarget.className += " active";
}
 

In the BO, with the affected page loaded for editing at Content -> Pages -> [page], the onclick property of my button tags is scrubbed after saving the page. By scrubbed, I mean that after saving the page, when I return to edit the page script, this is what is displayed...

<button class="termtab-links">Section 1</button>
 

Why is the onclick property being dropped? Without being able to use this method for controlling button click events, how else am I to control the behaviour of the buttons?