How to add product description tabs on product page

Copy the following code in the bottom of the html part of the product page (directly in the product page's editor)

Then add the informations under the related section of the code

CODE

<div class="tab">

<button class="tablinks" onclick="openTab(event, 'Description')" id="defaultOpen">Description</button>

<button class="tablinks" onclick="openTab(event, 'Size')">Size Chart</button>

<button class="tablinks" onclick="openTab(event, 'Shipping')">Shipping</button>

</div>

<div id="Description" class="tabcontent">

<h3>Description</h3>

<!-- ENTER YOUR DESCRIPTION BELOW -->

</div>

<div id="Size" class="tabcontent">

<h3>Size Chart</h3>

<!-- ENTER YOUR SIZE CHART BELOW -->

<img src=""/> <!-- IF YOUR SIZE CHART IS AN IMAGE, ADD YOUR IMAGE URL INSIDE THE QUOTES -->

</div>

<div id="Shipping" class="tabcontent">

<h3>Shipping</h3>

<!-- ENTER YOUR SHIPPING INFORMATION BELOW -->

</div>

<!-- PLEASE DO NOT EDIT THE FOLLOWING CODE -->

<style>

.tab {

overflow: hidden;

border-bottom: 1px solid #ccc;

}

.tab button {

float: left;

border: none;

outline: none;

cursor: pointer;

padding: 14px 16px;

transition: 0.3s;

font-size: 17px;

}

.tab button:hover {

background-color: #ddd;

}

.tab button.active {

background-color: #ccc;

}

.tabcontent {

display: none;

padding: 6px 12px;

border-top: none;

}

h3 {

padding-top: 5px;

}

</style>

<script>

function openTab(evt, descName) {

var i, tabcontent, tablinks;

tabcontent = document.getElementsByClassName("tabcontent");

for (i = 0; i < tabcontent.length; i++) {

tabcontent[i].style.display = "none";

}

tablinks = document.getElementsByClassName("tablinks");

for (i = 0; i < tablinks.length; i++) {

tablinks[i].className = tablinks[i].className.replace(" active", "");

}

document.getElementById(descName).style.display = "block";

evt.currentTarget.className += " active";

}

document.getElementById("defaultOpen").click();

</script>