Display Information under tabs rather than above - HTML/CSS

Question

I have introduced this html, css and script to display our food options in their categories. However the information is being opened above each tab upon clicking rather than below it, how do I change this?

I believe it is something within javascript that needs to be changed.

 <script> function openCity(cityName, elmnt, color) { // Hide all elements with class="tabcontent" by default */ var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } // Remove the background color of all tablinks/buttons tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < tablinks.length; i++) { tablinks[i].style.backgroundColor = ""; } // Show the specific tab content document.getElementById(cityName).style.display = "block"; // Add the specific color to the button used to open the tab content elmnt.style.backgroundColor = color; } // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click(); </script>

 /* Style the tab buttons */.tablink { background-color: #4A5243; color: white; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; font-size: 14px; font: default; width: 25%; height: 25%; } /* Change background color of buttons on hover */.tablink:hover { background-color: #E8E1D6; } /* Set default styles for tab content */.tabcontent { color: #221F21; display: none; padding: 50px; text-align: center; } /* Style each tab content individually */ #Tringalings {background-color:#white;} #Burgers {background-color:#white;} #Salads {background-color:#white;} #KidsMenu {background-color:#white;}

 <div id="Tringalings" class="tabcontent"> <h1>Tringalings</h1> <p><b>Mac Bites</b> w bacon bits, grated gruyere, and smoked BBQ sauce</p> <p><b>Spicy Popcorn Chicken</b> w togarashi mayo</p> </div> <div id="Burgers" class="tabcontent"> <h1>Burgers</h1> <p>Paris is the capital of France.</p> </div> <div id="Salads" class="tabcontent"> <h1>Salads</h1> <p>Tokyo is the capital of Japan.</p> </div> <div id="KidsMenu" class="tabcontent"> <h1>Kids Menu</h1> <p>Oslo is the capital of Norway.</p> </div> <button class="tablink" onclick="openCity('Tringalings', this, '#E8E1D6')">Tringalings</button> <button class="tablink" onclick="openCity('Burgers', this, '#E8E1D6')"id="defaultOpen">Burgers</button> <button class="tablink" onclick="openCity('Salads', this, '#E8E1D6')">Salads</button> <button class="tablink" onclick="openCity('KidsMenu', this, '#E8E1D6')">Kids Menu</button>

Any support on this issue is much appreciated.

Thanks!

Answer 1

You need to move your detail HTML to the after your menu HTML so it can display after the menu.

<button class="tablink" onclick="openCity('Tringalings', this, '#E8E1D6')">
      Tringalings
    </button>
    <button
      class="tablink"
      onclick="openCity('Burgers', this, '#E8E1D6')"
      id="defaultOpen"
    >
      Burgers
    </button>
    <button class="tablink" onclick="openCity('Salads', this, '#E8E1D6')">
      Salads
    </button>
    <button class="tablink" onclick="openCity('KidsMenu', this, '#E8E1D6')">
      Kids Menu
    </button>
    <div id="Tringalings" class="tabcontent">
      <h1>Tringalings</h1>
      <p><b>Mac Bites</b> w bacon bits, grated gruyere, and smoked BBQ sauce</p>
      <p><b>Spicy Popcorn Chicken</b> w togarashi mayo</p>
    </div>

    <div id="Burgers" class="tabcontent">
      <h1>Burgers</h1>
      <p>Paris is the capital of France.</p>
    </div>

    <div id="Salads" class="tabcontent">
      <h1>Salads</h1>
      <p>Tokyo is the capital of Japan.</p>
    </div>

    <div id="KidsMenu" class="tabcontent">
      <h1>Kids Menu</h1>
      <p>Oslo is the capital of Norway.</p>
    </div>

Working sample at https://codesandbox.io/s/quirky-taussig-bebf08

Answer 2

I rewrote your snippet to position your navbar at the top of the screen.

Basic HTML layout (not using frameworks) does depend on the ordering of the elements.

Usually navbars go at the top of a page though that's not always the case but in the case of your simple example I think it works.

 function openCity(cityName, elmnt, color) { // Hide all elements with class="tabcontent" by default */ var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } // Remove the background color of all tablinks/buttons tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < tablinks.length; i++) { tablinks[i].style.backgroundColor = ""; } // Show the specific tab content document.getElementById(cityName).style.display = "block"; // Add the specific color to the button used to open the tab content elmnt.style.backgroundColor = color; } // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click();

 /* Style the tab buttons */.tablink { background-color: #4A5243; color: white; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; font-size: 14px; font: default; width: 25%; height: 25%; } /* Change background color of buttons on hover */.tablink:hover { background-color: #E8E1D6; } /* Set default styles for tab content */.tabcontent { color: #221F21; display: none; padding: 50px; text-align: center; } /* Style each tab content individually */ #Tringalings { background-color: white; } #Burgers { background-color: white; } #Salads { background-color: white; } #KidsMenu { background-color: white; }.navbar { /* your navbar styles here */ }

 <div class="navbar"> <button class="tablink" onclick="openCity('Tringalings', this, '#E8E1D6')">Tringalings</button> <button class="tablink" onclick="openCity('Burgers', this, '#E8E1D6')" id="defaultOpen">Burgers</button> <button class="tablink" onclick="openCity('Salads', this, '#E8E1D6')">Salads</button> <button class="tablink" onclick="openCity('KidsMenu', this, '#E8E1D6')">Kids Menu</button> </div> <div id="Tringalings" class="tabcontent"> <h1>Tringalings</h1> <p><b>Mac Bites</b> w bacon bits, grated gruyere, and smoked BBQ sauce</p> <p><b>Spicy Popcorn Chicken</b> w togarashi mayo</p> </div> <div id="Burgers" class="tabcontent"> <h1>Burgers</h1> <p>Paris is the capital of France.</p> </div> <div id="Salads" class="tabcontent"> <h1>Salads</h1> <p>Tokyo is the capital of Japan.</p> </div> <div id="KidsMenu" class="tabcontent"> <h1>Kids Menu</h1> <p>Oslo is the capital of Norway.</p> </div>