How do you show and hide multiple different elements on different clicks?

Question

I used the onClick function on each triggering element to make it show/hide multiple element IDs on click. The show/hide elements are hidden by default using the CSS display property (except for the first 3 main elements). The onClick event will change the display property of multiple elements to make some visible and some not. As the list of triggering elements and show/hide elements is growing, the script will become very inefficient and repetitive. How else can I achieve the following without using a lot of duplicate javascript pieces? The snippet below is a very simplified version of the script.

function trigger1(){
  document.getElementById('trigger1').style.display ='none';
  document.getElementById('trigger2').style.display ='none';
  document.getElementById('trigger3').style.display ='none';
  document.getElementById('element1').style.display ='block';
  document.getElementById('element2').style.display ='block';
  document.getElementById('element3').style.display ='block';
  document.getElementById('element4').style.display ='none';
  document.getElementById('element5').style.display ='none';
  document.getElementById('subelement1').style.display ='none';
  document.getElementById('subelement2').style.display ='none';
  document.getElementById('subelement3').style.display ='none';
}
function trigger2(){
  document.getElementById('trigger1').style.display ='none';
  document.getElementById('trigger2').style.display ='none';
  document.getElementById('trigger3').style.display ='none';
  document.getElementById('element1').style.display ='none';
  document.getElementById('element2').style.display ='none';
  document.getElementById('element3').style.display ='none';
  document.getElementById('element4').style.display ='block';
  document.getElementById('element5').style.display ='block';
  document.getElementById('subelement1').style.display ='none';
  document.getElementById('subelement2').style.display ='none';
  document.getElementById('subelement3').style.display ='none';
}
function trigger3(){
  document.getElementById('trigger1').style.display ='none';
  document.getElementById('trigger2').style.display ='none';
  document.getElementById('trigger3').style.display ='none';
  document.getElementById('element1').style.display ='block';
  document.getElementById('element2').style.display ='none';
  document.getElementById('element3').style.display ='block';
  document.getElementById('element4').style.display ='block';
  document.getElementById('element5').style.display ='none';
  document.getElementById('subelement1').style.display ='none';
  document.getElementById('subelement2').style.display ='none';
  document.getElementById('subelement3').style.display ='none';
}
function trigger4(){
  document.getElementById('trigger1').style.display ='none';
  document.getElementById('trigger2').style.display ='none';
  document.getElementById('trigger3').style.display ='none';
  document.getElementById('element1').style.display ='none';
  document.getElementById('element2').style.display ='none';
  document.getElementById('element3').style.display ='none';
  document.getElementById('element4').style.display ='none';
  document.getElementById('element5').style.display ='none';
  document.getElementById('subelement1').style.display ='block';
  document.getElementById('subelement2').style.display ='block';
  document.getElementById('subelement3').style.display ='none';
}
function trigger5(){
  document.getElementById('trigger1').style.display ='none';
  document.getElementById('trigger2').style.display ='none';
  document.getElementById('trigger3').style.display ='none';
  document.getElementById('element1').style.display ='none';
  document.getElementById('element2').style.display ='none';
  document.getElementById('element3').style.display ='none';
  document.getElementById('element4').style.display ='none';
  document.getElementById('element5').style.display ='none';
  document.getElementById('subelement1').style.display ='none';
  document.getElementById('subelement2').style.display ='block';
  document.getElementById('subelement3').style.display ='block';
}
function trigger6(){
  document.getElementById('trigger1').style.display ='none';
  document.getElementById('trigger2').style.display ='none';
  document.getElementById('trigger3').style.display ='none';
  document.getElementById('element1').style.display ='none';
  document.getElementById('element2').style.display ='none';
  document.getElementById('element3').style.display ='none';
  document.getElementById('element4').style.display ='none';
  document.getElementById('element5').style.display ='none';
  document.getElementById('subelement1').style.display ='block';
  document.getElementById('subelement2').style.display ='block';
  document.getElementById('subelement3').style.display ='block';
}

function triggerBack(){
  document.getElementById('trigger1').style.display ='block';
  document.getElementById('trigger2').style.display ='block';
  document.getElementById('trigger3').style.display ='block';
  document.getElementById('element1').style.display ='none';
  document.getElementById('element2').style.display ='none';
  document.getElementById('element3').style.display ='none';
  document.getElementById('element4').style.display ='none';
  document.getElementById('element5').style.display ='none';
  document.getElementById('subelement1').style.display ='none';
  document.getElementById('subelement2').style.display ='none';
  document.getElementById('subelement3').style.display ='none';
}

#trigger1 { display: block; background-color: red; }
#trigger2 { display: block; background-color: blue; }
#trigger3 { display: block; background-color: yellow; }

#element1 { display: none; background-color: purple; }
#element2 { display: none; background-color: green; }
#element3 { display: none; background-color: cyan; }
#element4 { display: none; background-color: violet; }
#element5 { display: none; background-color: magenta; }

#subelement1 { display: none; background-color: orange; }
#subelement2 { display: none; background-color: lightblue; }
#subelement3 { display: none; background-color: lightgreen; }

.container { width: 100%; }
.wrapper {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
.group {
    width: 100%;
    float: left;
    display: inline-block;
}
.element {
    height: 50px;
    width: 25%;
    float: left;
    display: inline-block;
}
button {
    height: 20px;
    width: 100px;
    background-color: black;
    color: white;
}

<div class="container">
  <div class="wrapper">
    <div class="group">
      <div class="element" id="trigger1" onClick="trigger1();"></div>
      <div class="element" id="trigger2" onClick="trigger2();"></div>
      <div class="element" id="trigger3" onClick="trigger3();"></div>
    </div>
    <div class="group">
      <div class="element" id="element1" onClick="trigger4();"></div>
      <div class="element" id="element2" onClick="trigger5();"></div>
      <div class="element" id="element3" onClick="trigger6();"></div>
      <div class="element" id="element4"></div>
      <div class="element" id="element5"></div>
    </div>
    <div class="group">
      <div class="element" id="subelement1"></div>
      <div class="element" id="subelement2"></div>
      <div class="element" id="subelement3"></div>
    </div>
    <div class="group">
      <button id="reset" onClick="triggerBack();">Back to start</button>
    </div>
  </div>
</div>

Answer 1

One way to DRY this up would be to store the metadata on each element which governs which .element elements of which .group should be displayed. To do that you could use two data attributes, each containing the indexes of the group/elements to display.

As you've tagged the question with jQuery, try this:

$('.element[data-element-index], #reset[data-element-index]').on('click', e => {  
  e.preventDefault();  
  $('.group, .element').hide();
  
  let $el = $(e.target);  
  let $group = $('.group').eq($el.data('group-index')).show();
  $group.find('.element').filter((i, el) => $el.data('element-index').indexOf($(el).index()) != -1).show();
});

.container {
  width: 100%;
}

.wrapper {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.group {
  width: 100%;
  float: left;
  display: inline-block;
}

.group .trigger { display: block; }
#trigger1 { background-color: red; }
#trigger2 { background-color: blue; }
#trigger3 { background-color: yellow; }

.element {
  height: 50px;
  width: 25%;
  float: left;
  display: none;
}
#element1 { background-color: purple; }
#element2 { background-color: green; }
#element3 { background-color: cyan; }
#element4 { background-color: violet; }
#element5 { background-color: magenta; }

#subelement1 { background-color: orange; }
#subelement2 { background-color: lightblue; }
#subelement3 { background-color: lightgreen; }

button {
  height: 20px;
  width: 100px;
  background-color: black;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="wrapper">
    <div class="group">
      <div class="element trigger" id="trigger1" data-group-index="1" data-element-index="[0,1,2]"></div>
      <div class="element trigger" id="trigger2" data-group-index="1" data-element-index="[3,4]"></div>
      <div class="element trigger" id="trigger3" data-group-index="1" data-element-index="[0,2,3]"></div>
    </div>
    <div class="group">
      <div class="element" id="element1" data-group-index="2" data-element-index="[0,1]"></div>
      <div class="element" id="element2" data-group-index="2" data-element-index="[1,2]"></div>
      <div class="element" id="element3" data-group-index="2" data-element-index="[0,1,2]"></div>
      <div class="element" id="element4"></div>
      <div class="element" id="element5"></div>
    </div>
    <div class="group">
      <div class="element" id="subelement1"></div>
      <div class="element" id="subelement2"></div>
      <div class="element" id="subelement3"></div>
    </div>
    <div>
      <button id="reset" data-group-index="0" data-element-index="[0,1,2]">Back to start</button>
    </div>
  </div>
</div>

Also note that I tidied up the CSS slightly to DRY that up too.