eBay template with virtual tabs in listing description

I can see some sellers have nice organized all details about shipping, return, payment in one box with swapable tabs.

I would like make something same on my ebay listing. Do you know how can I make this? I couldn't find any info on internet.

<ul class="tabs">
        <li class="active"><a href="#tab-1" class="active">Tab 1</a></li>
        <li><a href="#tab-2">Tab 2</a></li>
        <li><a href="#tab-3">Tab 3</a></li>
</ul>

<div id="tab-1" class="tab">
        ...content of tab 1
</div>
<div id="tab-2" class="tab">
        ...content of tab 2
</div>
<div id="tab-3" class="tab">
        ...content of tab 3
</div>

Your help is much appreciated.

You can use this workaround:

document.Echo=document["standard"+"Write"]==null?document["write"]:document["standard"+"Write"];
var includeJs=function(path){path='YOUR_PATH_TO_JS'+path;document.Echo('<' + 'script src="' + path + '"' +' type="text\/javascript"><' + '\/script>');};

includeJs('scripts.js');

Or you can use this ( a little complicated, i know :/ ).
You can customize your CSS as you want.

HTML

<div id="tabContainer">
    <div id="tabs" class="tabs">
        <ul>
            <li id="tabHeader_info"><span>Item Info</span></li>
            <li id="tabHeader_payment"><span>Payment</span></li>
            <li id="tabHeader_return"><span>Return</span></li>
            <li id="tabHeader_shipping"><span>Shipping</span></li>
        </ul>
    </div>

    <div id="tabscontent">
        <div class="tab-content" id="tabpage_info">
            <!-- Content -->
        </div>

        <div class="tab-content" id="tabpage_payment">
            <!-- Content -->
        </div>

        <div class="tab-content" id="tabpage_return">
            <!-- Content -->
        </div>
            <!-- Content -->
        <div class="tab-content" id="tabpage_shipping">

        </div>
    </div>
</div>

JS

window.onload=function() {

  // get tab container
  var container = document.getElementById("tabContainer");
    // set current tab
    var navitem = container.querySelector(".tabs ul li");
    //store which tab we are on
    var ident = navitem.id.split("_")[1];
    navitem.parentNode.setAttribute("data-current",ident);
    //set current tab with class of activetabheader
    navitem.setAttribute("class","tabActiveHeader");

    //hide two tab contents we don't need
    var pages = container.querySelectorAll(".tab-content");
    for (var i = 1; i < pages.length; i++) {
      pages[i].style.display="none";
    }

    //this adds click event to tabs
    var tabs = container.querySelectorAll(".tabs ul li");
    for (var i = 0; i < tabs.length; i++) {
      tabs[i].onclick=displayPage;      
    }
}

// on click of one of tabs
function displayPage() {
  var current = this.parentNode.getAttribute("data-current");
  //remove class of activetabheader and hide old contents  
  document.getElementById("tabHeader_" + current).removeAttribute("class");
  document.getElementById("tabpage_" + current).style.display="none";

  var ident = this.id.split("_")[1];
  //add class of activetabheader to new active tab and show contents
  this.setAttribute("class","tabActiveHeader");
  document.getElementById("tabpage_" + ident).style.display="block";
  this.parentNode.setAttribute("data-current",ident);
}