Display Information under tabs rather than above

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  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" >
  <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" >
  <h1>Burgers</h1>
  <p>Paris is the capital of France.</p>
</div>

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

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

<button  onclick="openCity('Tringalings', this, '#E8E1D6')">Tringalings</button>
<button  onclick="openCity('Burgers', this, '#E8E1D6')"id="defaultOpen">Burgers</button>
<button  onclick="openCity('Salads', this, '#E8E1D6')">Salads</button>
<button  onclick="openCity('KidsMenu', this, '#E8E1D6')">Kids Menu</button>

Any support on this issue is much appreciated.

Thanks!

CodePudding user response：

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

<button  onclick="openCity('Tringalings', this, '#E8E1D6')">
      Tringalings
    </button>
    <button
      
      onclick="openCity('Burgers', this, '#E8E1D6')"
      id="defaultOpen"
    >
      Burgers
    </button>
    <button  onclick="openCity('Salads', this, '#E8E1D6')">
      Salads
    </button>
    <button  onclick="openCity('KidsMenu', this, '#E8E1D6')">
      Kids Menu
    </button>
    <div id="Tringalings" >
      <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" >
      <h1>Burgers</h1>
      <p>Paris is the capital of France.</p>
    </div>

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

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

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

CodePudding user response：

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  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 >
        <button  onclick="openCity('Tringalings', this, '#E8E1D6')">Tringalings</button>
        <button  onclick="openCity('Burgers', this, '#E8E1D6')" id="defaultOpen">Burgers</button>
        <button  onclick="openCity('Salads', this, '#E8E1D6')">Salads</button>
        <button  onclick="openCity('KidsMenu', this, '#E8E1D6')">Kids Menu</button>
    </div>
    <div id="Tringalings" >
        <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" >
        <h1>Burgers</h1>
        <p>Paris is the capital of France.</p>
    </div>

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

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