Javascript for Accordion - Open one at a time

Javascript for Accordion - Open one at a time

Hi,

If someone could help me create javascript for an accordion I have created that would be awesome. I'm wanting it to do the following:

Only open one accordion item at a time

I'd like the page to load and have all the accordions be closed by default as well even if they were saved in their open state by accident.

I would like it to slide quite smoothly as well from one accordion to another.

I have created the accordion for SharePoint publishing pages.

my HTML is:
<div class="panel1" id="accordion">
      <div class="accordion-default">
         <div class="accordion-heading"> 
            <a class="accordion-toggle collapsed" aria-expanded="false" href="#collapseOne" data-toggle="collapse" data-parent="#accordion">Heading1</a> </div>
         <div class="panel2 accordioncollapse collapse" id="collapseOne" aria-expanded="false" style="height: 0px;">
            <div class="accordion-body"> Collapsible Content #1 </div>
         </div>
      </div>
      <div class="accordion-default">
         <div class="accordion-heading"> 
            <a class="accordion-toggle collapsed" aria-expanded="false" href="#collapseTwo" data-toggle="collapse" data-parent="#accordion">Heading2</a> </div>
         <div class="panel2 accordioncollapse collapse" id="collapseTwo" aria-expanded="false" style="height: 0px;">
            <div class="accordion-body"> Collapsible Content #2 </div>
         </div>
      </div>
      <div class="accordion-default">
         <div class="accordion-heading"> 
            <a class="accordion-toggle collapsed" aria-expanded="false" href="#collapseThree" data-toggle="collapse" data-parent="#accordion">Heading3</a> </div>
         <div class="panel2 accordioncollapse collapse" id="collapseThree" aria-expanded="false" style="height: 0px;">
            <div class="accordion-body"> Collapsible Content #3 </div>
         </div>
      </div>
      <div class="accordion-default">
         <div class="accordion-heading"> 
            <a class="accordion-toggle collapsed" aria-expanded="false" href="#collapseFour" data-toggle="collapse" data-parent="#accordion">Heading4</a> </div>
         <div class="panel2 accordioncollapse collapse" id="collapseFour" aria-expanded="false" style="height: 0px;">
            <div class="accordion-body"> Collapsible Content #4 </div>
         </div>
      </div>
      <div class="accordion-default">
         <div class="accordion-heading"> 
            <a class="accordion-toggle collapsed" aria-expanded="false" href="#collapseFive" data-toggle="collapse" data-parent="#accordion">Heading5</a> </div>
         <div class="panel2 accordioncollapse collapse" id="collapseFive" aria-expanded="false" style="height: 0px;">
            <div class="accordion-body"> Collapsible Content #5 </div>
         </div>
      </div>
      <div class="accordion-default">
         <div class="accordion-heading"> 
            <a class="accordion-toggle collapsed" aria-expanded="false" href="#collapseSix" data-toggle="collapse" data-parent="#accordion">Heading6</a> </div>
         <div class="panel2 accordioncollapse collapse" id="collapseSix" aria-expanded="false" style="height: 0px;">
            <div class="accordion-body"> Collapsible Content #6​ </div>
         </div>
      </div>
      <div class="accordion-default">
         <div class="accordion-heading"> 
            <a class="accordion-toggle collapsed" aria-expanded="false" href="#collapseSeven" data-toggle="collapse" data-parent="#accordion">Heading7</a> </div>
         <div class="panel2 accordioncollapse collapse" id="collapseSeven" aria-expanded="false" style="height: 0px;">
            <div class="accordion-body"> Collapsible Content #7 </div>
         </div>
      </div>
      <div class="accordion-default">
         <div class="accordion-heading"> 
            <a class="accordion-toggle collapsed" aria-expanded="false" href="#collapseEight" data-toggle="collapse" data-parent="#accordion">Heading8</a> </div>
         <div class="panel2 accordioncollapse collapse" id="collapseEight" aria-expanded="false" style="height: 0px;">
            <div class="accordion-body"> Collapsible Content #8 </div>
         </div>
      </div>
      <div class="accordion-default">
         <div class="accordion-heading"> 
            <a class="accordion-toggle collapsed" aria-expanded="false" href="#collapseNine" data-toggle="collapse" data-parent="#accordion">Heading9</a> </div>
         <div class="panel2 accordioncollapse collapse" id="collapseNine" aria-expanded="false" style="height: 0px;">
            <div class="accordion-body"> Collapsible Content #9 </div>
         </div>
      </div>
      <div class="accordion-default">
         <div class="accordion-heading"> 
            <a class="accordion-toggle collapsed" aria-expanded="false" href="#collapseTen" data-toggle="collapse" data-parent="#accordion">Heading10</a> </div>
         <div class="panel2 accordioncollapse collapse" id="collapseTen" aria-expanded="false" style="height: 0px;">
            <div class="accordion-body"> Collapsible Content #10 </div>
         </div>
      </div>
   </div

CSS is
.panel1 {
width: 60%;
margin-left: 20px;
}
.accordion-default {
border-bottom: 1px solid #C8C8C8;
}
.accordion-heading > a {
display: block;
line-height: 1.875;
font-size: 16px;
font-style: normal;
font-family: sans-serif;
font-weight: bold;
text-decoration: none;
color: black;
padding-top: 18px;
padding-bottom: 18px;
}
.accordion-heading > a:hover {
text-decoration: none;
color: #D0006F;
}
.accordion-heading > a:active {
text-decoration: none;
color: #D0006F;
}
.accordion-heading > a:focus {
text-decoration: none;
color: #D0006F;
}
.accordion-body {
margin-left: 2px;
padding-top: 5px;
padding-bottom: 10px;
}
.accordion-toggle {
padding-left: 2px;
position: relative;
cursor: pointer;
text-align: left;
}
.accordion-toggle::before, .accordion-toggle::after {
right: 5px;
content: '';
display: block;
position: absolute;
top: 50%;
width: 24px;
height: 2px;
margin-top: -2px;
background-color: #D0006F;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transition: all 0.25s;
transition: all 0.25s;
}
.accordion-toggle::before {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
.accordion-toggle.collapsed::before {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
text-decoration: none;
}
.accordion-toggle.collapsed::after {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
text-decoration: none;
}

Thanks in advance!! Hoping someone can help me out!
Clare