how to hide/show elements

Question

i have multiple divs i conviently id'd as "start", "a", "b", "c", ect. On page load i would like to show only the div id'd as "start". On the press of a button, i'd like to show only the div id'd as "a", and repeadtly continue through all the letters of the alphabet. heres the code i have so far.

<div id="start">
  Lets Begin<br />
  <button id="startbutton">Start</button>
</div>

<div id="a">
  <img onclick="play('sounds/apple.mp3')" 
       src="images/apple.png" width="400" height="400" />
  <br />
  <button onclick="play('sounds/correct1.mp3')" 
          class="multiple-choice">
    Apple
  </button>
  <button onclick="play('sounds/wrong1.mp3')" 
          class="multiple-choice">
    Slinky
  </button>
  <button onclick="play('sounds/wrong1.mp3')" 
          class="multiple-choice">
    Orange
  </button>
</div>

<div id="b">
  <img onclick="" src="images/banana.png" 
       width="400" height="400" />
  <br />
  <button onclick="" class="multiple-choice">Monkey</button>
  <button onclick="" class="multiple-choice">Banana</button>
  <button onclick="" class="multiple-choice">Yellow</button>
</div>

im aware i should use addeventlistners rather than onclicks, but lets work with onclicks for now.

im quite new to javascript but have plenty of php experience. so i thought about switches with display:none, display:block styling. But i just cant peice it together.

Answer 1

That may be fairly easy to do so I'll try to have a quick and easy solution that get things done.

As already suggested in the comments above, it's a good idea to prepare a CSS class, let's name it .hidden, that simply sets the display property to none which means once applied to an element, it hides it.

So the idea is simple, we'll have some divs where each one contains a button that shows another div based on an ID. Let me explain the process further:

• Prepare the .hidden class as said above.
• We'll have some divs that can be shown or hidden based on buttons clicks.
• We'll give those divs a class, let's name it .toggleable for example, which will make it easier for us to get select those divs later in the JS part.
• Those divs will by default have the .hidden class applied so they are hidden on initial page load. We'll only leave the div#start intact so it will be shown on page load.
• Each of those divs, as said, has a button that shows another div based on an ID. To easily grab those buttons in the JS part we'll give each button a class, let's name it .toggler.
• Each button will also has a data-* attribute, let's name it data-show for example, that will hold the ID of the div to show (something like data-show="a").
• Now we have the structure in place, we may move on to the implementation. In the JS part we'll select and cache all those divs and buttons so we can easily work with them.
• We'll loop through the buttons and apply a click event listener to each one that handles the showing/hiding of our .togleable divs.
  • The click handler will find the currently shown .toggleable div and hides it using our .hidden class.
  • And lastly, the handler will show the requested .togleable div based on the clicked button's data-show attribute by removing the .hidden class from the requested .togleable div.

And now here's a live demo that you may manipulate the way you see fit your case:

/** select all the DIVs and buttons */
const togglers = document.querySelectorAll('.toggler'),
  /** quickly transform the result set retuned by "querySelectorAll" into an array so we can use the built-in array methods like "forEach" and "find" */
  togglebales = [...document.querySelectorAll('.toggleable')],
  /** "show" is our click event handler. It handles showing a DIV based on the ID found in the clicked button's "data-show" attribute. If you use an arrow function it won't work!! */
  show = function() {
    /** finds the currently shown DIV and hides it using the ".hhidden" class */
    togglebales.find(el => !el.classList.contains('hidden')).classList.add('hidden');
    /** finds the DIV to show by the ID in the button's "data-show" attribute (by simply removing the ".hidden" class from that DIV */
    togglebales.find(el => el.id === this.dataset.show).classList.remove('hidden');
  }

/** apply the click handler, "show", to the buttons */
togglers.forEach(btn => btn.addEventListener('click', show))

/** hides an elemnt, simply. */
.hidden {
  display: none;
}

<!-- The ".hidden" class is given to all ".togleable" DIVs except the one with ID of "start" so that one is shown on page load -->

<!-- Each button has a "data-show" atytribute that contains the ID of the DIV to show -->

<div class="toggleable" id="start">
  <p>Start DIV</p>
  <button class="toggler" data-show="a">Show DIV#a</button>
</div>
<div id="a" class="toggleable hidden">
  <p>DIV#a</p>
  <button class="toggler" data-show="b">Show DIV#b</button>
</div>
<div id="b" class="toggleable hidden">
  <p>DIV#b</p>
  <button class="toggler" data-show="c">Show DIV#c</button>
</div>
<div id="c" class="toggleable hidden">
  <p>DIV#c</p>
  <button class="toggler" data-show="start">Show DIV#start</button>
</div>

The above solution is just one way of getting things done and it is NOT the only way nor the best way to do the job. Many other alternative solution can be found like using event delegation to reduce the call to the addEventListener method.

Finally, here are some useful links to the docs of some of the methods/techniques used in the snippet above: addEventListener, querySelector, querySelectorAll, classList methods, data attributes, destructuring assignment, array methods