title: How do I create tabs in Pug
body: <p>I have a Node/Express app in Visual Studio and I want to create tabs, so when you click on a tab, it displays the content below. The thing is, I'm using an HTML-->Pug converter (I'm very new to Pug), so I would not be surprised if something went afoul in there. Below is my code, but nothing is showing and when I click a tab, it only changes color slightly (shown in the Tokyo tab), but does not show any content.</p>
  
  <p><a href="https://i.stack.imgur.com/EqEYb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EqEYb.png" alt="enter image description here"></a></p>
  
  <p>Here's what I have so far in my <code>index.pug</code>:</p>
  
  <pre><code>extends layout
  
      block content
        doctype html
        html(lang="en")
          head
            meta(charset='utf-8')
            meta(name='viewport' content='width=device-width, initial-scale=1')
          section
            nav
              ul
                li.title Study Bot
                li.robot 
                  img(src='/images/robot-face.jpg' alt='Robot face' width='130px')
            article
          footer
            // Tab links
            .tab
              button.tablinks(onclick="openCity(event, 'London')") London
              button.tablinks(onclick="openCity(event, 'Paris')") Paris
              button.tablinks(onclick="openCity(event, 'Tokyo')") Tokyo
            // Tab content
            #London.tabcontent
              h3 London
              p London is the capital city of England.
            #Paris.tabcontent
              h3 Paris
              p Paris is the capital of France.
            #Tokyo.tabcontent
              iframe#encyclopedia-window(src='https://en.wikipedia.org/wiki/')
  </code></pre>
  
  <p>In my <code>main.css</code> (the relevant parts):</p>
  
  <pre><code>footer {
      background-color: #666;
      height: 500px;
      padding: 10px;
      text-align: center;
      font-size: 35px;
      color: white;
  }
  .tab {
      overflow: hidden;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
  }
  
  /* Style the buttons inside the tab */
  .tab button {
      background-color: inherit;
      float: left;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 14px 16px;
      transition: 0.3s;
      font-size: 17px;
  }
  
  /* Change background color of buttons on hover */
  .tab button:hover {
      background-color: #ddd;
  }
  
  /* Create an active/current tablink class */
  .tab button.active {
      background-color: #ccc;
  }
  
  /* Style the tab content */
  .tabcontent {
      display: none;initial-letter
      padding: 6px 12px;
      border: 1px solid #ccc;
      border-top: none;
  }
  
  #encyclopedia-window {
      position: relative;
      margin-top: 25px;
      height: 90%;
      width: 95%;
  }
  </code></pre>
  
  <p>Also this in my <code>index.js</code>:</p>
  
  <pre><code>/* Clickable tabs */
      function openCity(evt, cityName) {
      var i, tabcontent, tablinks;
      tabcontent = document.getElementsByClassName("tabcontent");
      for (i = 0; i &lt; tabcontent.length; i++) {
          tabcontent[i].style.display = "none";
      }
      tablinks = document.getElementsByClassName("tablinks");
      for (i = 0; i &lt; tablinks.length; i++) {
          tablinks[i].className = tablinks[i].className.replace(" active", "");
      }
      document.getElementById(cityName).style.display = "block";
      evt.currentTarget.className += " active";
  }
  </code></pre>