CODEWITHSUNDEEP
javascript
Jedi mindTricker
Jedi mindTricker

Reputation: 23

Javascript Hide div on page load toggle between buttons

I know this has been asked, but I cannot figure out how to fix my issue. I have 2 buttons a drink menu and a food menu. I'm able to correctly show the different menus show when their button is clicked. However when the page loads the drink menu appears below the food menu. Once I click food menu buttons the drink menu disappears,and the buttons function as you would expect ie. one menu is shown while the other one is not. I'm not sure what the best method is to hide the drink menu. Any help would be much appreciated.

<button onclick="javascript:toggle('foodMenu')" class="btnMenu">Food</button>
<button onclick="javascript:toggle('drinkMenu')"  class="btnMenu">Drink</button>

  <div id="foodMenu">
      <h1 class="menuHD">Food Menu</h1>
  </div>

   <div id="drinkMenu">
       <h1>Drink Menu</h1>
    </div>

var divs = [ "foodMenu", "drinkMenu" ];
function toggle(layer) {
    var d
    for(var i = 0; i < divs.length; i += 1) {
        d = document.getElementById(divs[i]);
        d.style.display = 'none';

    }

}

enter image description here

Upvotes: 0

Views: 112

Answers (3)

MathCoder
MathCoder

Reputation: 442

I added style="display:none" to the second div in your first block of code. So when the page loads it will display the food Menu.

<button onclick="javascript:toggle('foodMenu')" class="btnMenu">Food</button>
<button onclick="javascript:toggle('drinkMenu')"  class="btnMenu">Drink</button>

  <div id="foodMenu">
      <h1 class="menuHD">Food Menu</h1>
  </div>

  <div id="drinkMenu" style="display:none">
       <h1>Drink Menu</h1>
  </div>

For the javascript part use the following code. It will toggle between displaying the food and drink menu.

function toggle(layer) {
    const hidingDiv = (layer == 'foodMenu') ? 'drinkMenu' : 'foodMenu';
    document.getElementById(layer).style.display = 'block';
    document.getElementById(hidingDiv).style.display = 'none';
}

Upvotes: 1

Serge Harb
Serge Harb

Reputation: 59

You can toggle by default the food menu, so every time you click a button, you color its text with red, so you know it is selected: its corresponding menu block will show.

Your HTML code:


    <button onclick="javascript:toggle('foodMenu')" class="btnMenu" id="foodMenu-btn">Food</button>


    <button onclick="javascript:toggle('drinkMenu')" class="btnMenu" id="drinkMenu-btn">Drink</button>

    <div id="foodMenu">
        <h1 class="menuHD">Food Menu</h1>
    </div>


    <div id="drinkMenu">
        <h1>Drink Menu</h1>
    </div>

Your JavaScript code:

    // available menu divs
    let divs = ["foodMenu", "drinkMenu"];

    function toggle(layer) {
      // reset all buttons and divs
      for (let i = 0; i < divs.length; i += 1) {
        let d = document.getElementById(divs[i]);
        d.style.display = 'none';

        // reset all buttons text colors
        let b = document.getElementById(divs[i] + '-btn');
        b.style.color = 'black';
      }

      // set current menu visible
      let menu = document.getElementById(layer);
      menu.style.display = 'block';

      // set current menu button colored "red"
      let btn = document.getElementById(layer + '-btn');
      btn.style.color = 'red';
    }

    // select food menu by default
    toggle('foodMenu')

Upvotes: 1

imvain2
imvain2

Reputation: 15847

I rewrote your script some. I used a class of menu to reference the divs and to set them default to be hidden.

Its also setup to hide any div not selected but only show the selected div.

var divs = [ "foodMenu", "drinkMenu" ];
function toggle(layer) {
    var _menus = document.getElementsByClassName("menu");
    for(var i = 0; i < _menus.length; i++) {
        _menu = _menus[i];
        _menu.style.display = 'none';
    }
    
    var _menu = document.getElementById(layer);
    _menu.style.display = 'block';
}
.menu{
display:none;
}
<button onclick="javascript:toggle('foodMenu')" class="btnMenu">Food</button>
<button onclick="javascript:toggle('drinkMenu')"  class="btnMenu">Drink</button>

  <div class="menu" id="foodMenu">
      <h1 class="menuHD">Food Menu</h1>
  </div>

   <div class="menu" id="drinkMenu">
       <h1>Drink Menu</h1>
    </div>

Upvotes: 1

Related Questions