FAQ Accordion - code helper

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<title>Accordion</title>
</head>
<body>
<div class="accordion" id="accordionExample275" aria-multiselectable="true">
  <div class="card z-depth-0">
    <div class="card-header" role="tab" id="headingOne"> 
      <h5 class="mb-1">
        
          <button class="btn btn-link" type="button" data-toggle="collapse" data-target=".multi-collapse"
           aria-expanded="false" aria-controls="collapseOne2 collapseOne3" style="font-size:20px" >       
           <p id="text">Still Have More Questions? We Have More Answers.</p>  
            <div class="center">
            <button class="button1 button1" type="button" data-toggle="collapse" id="collapseOne1" data-target=".multi-collapse"
               aria-expanded="false" aria-controls="collapseOne2 collapseOne3">View FAQ</button>
          </div>
       </button>
      </h5>
    </div> 
      <h5>
         <div class="collapse multi-collapse" >
        <button class="btn1 btn-link" role="tab" type="button" data-toggle="collapse" id="collapseOne2" data-target="#collapseOne3"
          aria-expanded="true" aria-controls="collapseOne3" style="font-size:20px">      
        Question #1
       </button>
        </div>
      </h5>
    <div class="collapse multi-collapse">
      <div id="collapseOne3" class="collapse" aria-labelledby="headingOne"
      data-parent="#accordionExample275" data-toggle="collapse" role="tabpanel">
      <div class="card-body" style="font-size:20px">
        Answer #1 ..............................
      </div>
        </div>
       </div> 
      <h5>
         <div class="collapse multi-collapse" >
        <button class="btn1 btn-link" role="tab" type="button" data-toggle="collapse" id="collapseOne4" data-target="#collapseOne5"
          aria-expanded="true" aria-controls="collapseOne5" style="font-size:20px">      
        Question #2
       </button>
        </div>
      </h5>
     <div class="collapse multi-collapse">
      <div id="collapseOne5" class="collapse" aria-labelledby="headingOne"
      data-parent="#accordionExample275" data-toggle="collapse" role="tabpanel">
      <div class="card-body" style="font-size:20px">
        Answer #2 ...............................
      </div>
         </div> 
      <h5>
         <div class="collapse multi-collapse" >
        <button class="btn1 btn-link" role="tab" type="button" data-toggle="collapse" id="collapseOne6" data-target="#collapseOne7"
          aria-expanded="true" aria-controls="collapseOne7" style="font-size:20px">      
        Question #3
       </button>
        </div>
      </h5>
    <div class="collapse multi-collapse">
      <div id="collapseOne7" class="collapse" aria-labelledby="headingOne"
      data-parent="#accordionExample275" data-toggle="collapse" role="tabpanel">
      <div class="card-body" style="font-size:20px">
        Answer #3 ........................
      </div>
        </div>
     </div>
   </div>
  </div>
  </div>
</body>
</html>

xxxxxxxxxx
 
.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-property: height, visibility;
  transition-property: height, visibility;
  -webkit-transition-duration: .17s;
  transition-duration: .17s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}
​
.button1 {
  background-color: #ffffff; /* White */
  border: none;
  color: black;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  padding: 12px 100px;
  cursor: pointer;
   margin: 0;
  position: absolute;
  top: 70%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
​
.center {
  margin: 0;
  position: static;
  top: 65%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
​
.text {
  align-content: center;
  padding: 10 10 10 10;
  
}
.card-header {
  background-color:#ffffff;
}
.btn {
    width:100%;
    height:150px;
    text-align: center;
    background-color: #3f516c;
    color: #ffffff;
    border-width: 0px;
    border: none;
    border-style: none;
    align-content: center;
}
​
.btn:visited {
    width:100%;
    height:150px;
    text-align: center;
    background-color: #3f516c;
    color: #ffffff;
    border-width: 0px;
    border: none;
    border-style: none;
    align-content: center;
}
​
.btn:focus {
    width:100%;
    height:150px;
    text-align: center;
    background-color: #3f516c;
    color: #ffffff;
    border-width: 0px;
    border: none;
    border-style: none;
    align-content: center;
}
​
.btn:hover {
    width:100%;
    height:150px;
    text-align: center;
    background-color: #3f516c;
    color: #ffffff;
    border-width: 0px;
    border: none;
    border-style: none;
    align-content: center;
}
​
.btn:active {
    width:100%;
    height:150px;
    text-align: center;
    background-color: #3f516c;
    color: #ffffff;
    border-width: 0px;
    border: none;
    border-style: none;
    align-content: center;
}
​
p:hover {
​
opacity:1.0;
box-shadow:none;
​
}
​
.btn1 {
    width:100%;
    height:80px;
    padding-top: 10px;
    padding-bottom: 100px
    padding-left: 20px
    padding-bottom: 15px;
    text-align: left;
    border-width: 0px;
    border-bottom: 1px solid black;
    text-decoration: none;    
}
​
​
.btn1, .btn1:hover, .btn1:active, .btn1:visited, .btn1:focus {
    text-decoration:none;
}
​
#collapseOne3 {position: relative; left: 10px; border-bottom: 1px solid black; text-align: left;}
#collapseOne5 {position: relative; left: 10px; border-bottom: 1px solid black; text-align: left;}
#collapseOne7 {position: relative; left: 10px; border-bottom: 1px solid black; text-align: left;}
​
#collapseOne2 {
  position: relative;
  left: 10px;
}
#collapseOne4 {
  position: relative;
  left: 10px;
}
​
#collapseOne6 {
  position: relative;
  left: 10px;
}
​
.headingOne {
height: auto;
overflow: hidden;
}
​
​
​

xxxxxxxxxx
 
<script type='text/javascript' src="js/jquery.min.js"></script>
<script type='text/javascript'>
  // Size the parent iFrame
  function iframeResize() {
    var height = $('body').outerHeight(); // IMPORTANT: If body's height is set to 100% with CSS this will not work.
    parent.postMessage("resize::"+height,"*");
  }
​
  $(document).ready(function() {
    // Resize iframe
    setInterval(iframeResize, 17);
    
   
  });
</script>
​
 $('#first-button, #collapseOne1').on('click', () => {
      const $els = $('.multi-collapse > div');
      $els.each(function() {
        if ($(this).hasClass('show')) $(this).removeClass('show');
      });
    });
​

Console errors: 0