Additional information tab

<div class="tab-wrapper">
  <div class="fn-tab">
  <button class="tablinks-cus" onclick="openTab(event, 'tab-1')" id="tab-cus-active">Product Review</button>
  <button class="tablinks-cus" onclick="openTab(event, 'tab-2')">Information</button>
</div>
<!-- Tab content -->
<div id="tab-1" class="tabcontent-cus">
  {% if section.settings.show_review%}
    <div data-kb-widget-type="kb-product-widget" data-kb-product-id="{{product.id}}"></div>
  {% endif %}
</div>
<div id="tab-2" class="tabcontent-cus ">
      {% if product.description contains "<!-- split -->" %}
        {{ product.description | split: '<!-- split -->' | last }}
    {% endif %}
</div>
</div>

<script>
  function openTab(evt, productTab) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent-cus");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks-cus");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(productTab).style.display = "block";
  evt.currentTarget.className += " active";
}
document.getElementById("tab-cus-active").click();
</script>

.fn-tab {
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  color: #6e6e6e;
}
.fn-tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  background:transparent;
  font-size: 20px;
  color:#6e6e6e;
}
.fn-tab button:hover {
  color: #ed1f79;
}

.fn-tab button.active {
  color: #ed1f79;
  border-bottom:1px solid #ed1f79
}
.tabcontent-cus {
  display: none;
  padding: 6px 12px;
}