How to setup the horizontal tabs
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>