tabs

templates/content/node--islandora-rdm-dataset.html.twig

@@ -40,8 +40,12 @@ set node_classes = [
   </header>
 {% endif %}
   <div{{ content_attributes.addClass('node-content clear') }}>
+{#=============#}
+{#Dummy Content#}
+{#=============#}
 <hr>
 <h3>Rob's dummy content</h3>
+{#Table#}
 <table class="metadata">
   <tbody>
     <tr id="row_id">
@@ -74,29 +78,29 @@ set node_classes = [
     </tr>
   </tbody>
 </table>
-
+{#/table#}
 <!-- dummy tabs -->
 <!-- Tab links -->
 <div class="tab">
-  <button id="defaultOpen" class="tablinks" onclick="openCity(event, 'London')">London</button>
-  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
-  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
+  <button id="defaultOpen" class="tablinks" onclick="openTab(event, 'Tab01')">Tab01</button>
+  <button class="tablinks" onclick="openTab(event, 'Tab02')">Tab02</button>
+  <button class="tablinks" onclick="openTab(event, 'Tab02')">Tab02</button>
 </div>
 
 <!-- Tab content -->
-<div id="London" class="tabcontent">
-  <h3>London</h3>
-  <p>London is the capital city of England.</p>
+<div id="Tab01" class="tabcontent">
+  <h3>Tab01</h3>
+  <p>Adipisicing consectetur dolorem tempora quibusdam ad at! Eius consectetur consequuntur omnis tenetur repudiandae. Iure laudantium optio magni laboriosam rerum Commodi quisquam tempora eaque minima nemo! Distinctio earum dolores aliquid facere</p>
 </div>
 
-<div id="Paris" class="tabcontent">
-  <h3>Paris</h3>
-  <p>Paris is the capital of France.</p>
+<div id="Tab02" class="tabcontent">
+  <h3>Tab02</h3>
+  <p>Dolor quam quo vero perspiciatis vel. Odit ut delectus doloribus illum culpa? Nobis culpa aperiam omnis quae cupiditate ipsam libero iure vero. Unde sequi eligendi eaque eum repellendus Animi ullam.</p>
 </div>
 
-<div id="Tokyo" class="tabcontent">
-  <h3>Tokyo</h3>
-  <p>Tokyo is the capital of Japan.</p>
+<div id="Tab02" class="tabcontent">
+  <h3>Tab02</h3>
+  <p>Adipisicing ea dolorum eos excepturi nobis Ipsa officia accusamus omnis iure at Repudiandae quaerat ratione provident quos quae dolor Est voluptatibus aliquam fuga enim nostrum? Necessitatibus magni earum quo esse.</p>
 </div>
 <!-- /dummy tabs -->
 
@@ -107,9 +111,11 @@ set node_classes = [
     {{ content }}
   </div>
 </article>
+{#==========#}
+{#JS for Tabs#}
+{#==========#}
 <script>
-
-function openCity(evt, cityName) {
+function openTab(evt, tabName) {
   // Declare all variables
   var i, tabcontent, tablinks;
 
@@ -126,7 +132,7 @@ function openCity(evt, cityName) {
   }
 
   // Show the current tab, and add an "active" class to the button that opened the tab
-  document.getElementById(cityName).style.display = "block";
+  document.getElementById(tabName).style.display = "block";
   evt.currentTarget.className += " active";
 }