The horizontal tabs located in room_sample.html have the script included at the bottom of the html and the styles located at app/style/scss/elements/_tabs.scss

The code is compound from the tabs titles and tabs content.

The default open tab has the id "#defaultOpen".

The class ".tablinks" is used for reference in js code to show its content or hide it.

The tab content starts with the classes:

<div class="hg-tabs-content">
 <div id="room-description" class="tabcontent">
..
 </div>
</div>

You can place your own content within that code.

The script that is showing and hiding the content of a tab is the following:

<script type="text/javascript">
 function openTab(evt, tabName) {
 // Declare all variables
 var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
 tabcontent = document.getElementsByClassName("tabcontent");
 for (i = 0; i < tabcontent.length; i++) {
 tabcontent[i].style.display = "none";
 }
// Get all elements with class="tablinks" and remove the class "active"
 tablinks = document.getElementsByClassName("tablinks");
 for (i = 0; i < tablinks.length; i++) {
 tablinks[i].className = tablinks[i].className.replace(" active", "");
 }
// Show the current tab, and add an "active" class to the button that opened the tab
 document.getElementById(tabName).style.display = "block";
 evt.currentTarget.className += " active";
 }
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>