What is the best way to display and conceal various elements with each individual click?

Question

What is the best way to display and conceal various elements with each individual click?

Utilizing the onClick function for each triggering element, I have implemented a show/hide feature for multiple element IDs upon click. The default setting is to hide the show/hide elements using CSS display property, except for the initial 3 main elements. As the list of triggering elements and show/hide elements grows, the script can become inefficient and repetitive. Is there a more efficient way to achieve this without resorting to extensive duplicate javascript code? The following snippet provides a 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(){
  ... // (rest of the original code omitted for brevity)
}

function triggerBack(){
  ... // (rest of the original code omitted for brevity)
}

javascript jquery css show-hide

Answer 1

Answer №1

To make this more concise, you can store the metadata on each element that controls which .element elements of which .group should be shown. This can be achieved by using two data attributes, each containing the indexes of the group/elements to display.

If you are working with jQuery, you can try the following approach:

$('.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>

I also optimized the CSS for better organization and efficiency.

Answer 2

To make this more concise, you can store the metadata on each element that controls which .element elements of which .group should be shown. This can be achieved by using two data attributes, each containing the indexes of the group/elements to display.

If you are working with jQuery, you can try the following approach:

$('.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>

I also optimized the CSS for better organization and efficiency.

Answer 3

Answer №2

To achieve this functionality using classes, you can assign a class to a top-level element based on its current state. By default, all elements are hidden and the visibility of specific elements is defined in the CSS for each state.

function activateState1(){
  document.getElementById('container').className = 'container state1';
}
function activateState2(){
  document.getElementById('container').className = 'container state2';
}
function activateState3(){
  document.getElementById('container').className = 'container state3';
}
function activateState4(){
  document.getElementById('container').className = 'container state4';
}
function activateState5(){
  document.getElementById('container').className = 'container state5';
}
function activateState6(){
  document.getElementById('container').className = 'container state6';
}

function resetToInitialState(){
  document.getElementById('container').className = 'container initial';
}

#trigger1 { display: none; background-color: red; }
#trigger2 { display: none; background-color: blue; }
#trigger3 { display: none; 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;
}

.state1 #element1,
.state1 #element2,
.state1 #element3 {
  display: block;
} 

// Other states' CSS definitions continue...

If you prefer a JavaScript approach, you can use functions like `hide()` and `show()` to control visibility:

function hide(ids){
  ids.forEach(id => {
    document.getElementById(id).style.display ='none';
  });
}

function show(ids){
  ids.forEach(id => {
    document.getElementById(id).style.display ='block';
  });
}

function activateState1(){
  hide([
    'trigger1',
    'trigger2',
    'trigger3',
    'element4',
    'element5',
    'subelement1',
    'subelement2',
    'subelement3'
  ]);
  show([
    'element1',
    'element2',
    'element3'
  ]);
}

Answer 4

To achieve this functionality using classes, you can assign a class to a top-level element based on its current state. By default, all elements are hidden and the visibility of specific elements is defined in the CSS for each state.

function activateState1(){
  document.getElementById('container').className = 'container state1';
}
function activateState2(){
  document.getElementById('container').className = 'container state2';
}
function activateState3(){
  document.getElementById('container').className = 'container state3';
}
function activateState4(){
  document.getElementById('container').className = 'container state4';
}
function activateState5(){
  document.getElementById('container').className = 'container state5';
}
function activateState6(){
  document.getElementById('container').className = 'container state6';
}

function resetToInitialState(){
  document.getElementById('container').className = 'container initial';
}

#trigger1 { display: none; background-color: red; }
#trigger2 { display: none; background-color: blue; }
#trigger3 { display: none; 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;
}

.state1 #element1,
.state1 #element2,
.state1 #element3 {
  display: block;
} 

// Other states' CSS definitions continue...

If you prefer a JavaScript approach, you can use functions like `hide()` and `show()` to control visibility:

function hide(ids){
  ids.forEach(id => {
    document.getElementById(id).style.display ='none';
  });
}

function show(ids){
  ids.forEach(id => {
    document.getElementById(id).style.display ='block';
  });
}

function activateState1(){
  hide([
    'trigger1',
    'trigger2',
    'trigger3',
    'element4',
    'element5',
    'subelement1',
    'subelement2',
    'subelement3'
  ]);
  show([
    'element1',
    'element2',
    'element3'
  ]);
}

Answer 5

Answer №3

Have you considered using jQuery to hide elements by class instead of hiding everything by id? Or are you required to use vanillaJS?

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".stuff").hide();
  });
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p class="stuff">This is a paragraph.</p>
<p class="stuff">This is another paragraph.</p>
<p>this is a different paragraph, that won't be hidden on click</p>

<button>Click me to hide paragraphs</button>

</body>
</html>

Answer 6

Have you considered using jQuery to hide elements by class instead of hiding everything by id? Or are you required to use vanillaJS?

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".stuff").hide();
  });
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p class="stuff">This is a paragraph.</p>
<p class="stuff">This is another paragraph.</p>
<p>this is a different paragraph, that won't be hidden on click</p>

<button>Click me to hide paragraphs</button>

</body>
</html>

What is the best way to display and conceal various elements with each individual click?

Answer №1

Answer №2

Answer №3

Similar questions

The error message "Create controller with service — Get... is not a function" indicates that

Exploring a collection of objects in an Angular 2 component

Overcoming Challenges with Ajax Success in Bootstrap DataTable Modal

Is there a way to display the avatar image outside of the drawer in MUI ReactJS?

Ending an $.ajax request when the page is exited

The $geoNear operator must be the initial stage in a pipeline to be valid

Click the button to save the text to your clipboard with a customized

Steps to define a JavaScript mixin in VueJS

Set the current time to ISO8601 format

What is the best way to center my text vertically within a Bootstrap 5 "col" class division?

Saving the initial and final days of each month in a year using javascript

Tips for transferring a JavaScript object to a Node.js server

Resolve the flexible width problem when inserting text in pptxgenjs

"An issue has been detected in the Entry module, which cannot be located in

The functionality of the Ajax call ceases to function properly on mobile devices after a period of time

Trouble with the drop-down menu displaying "string:2" in an AngularJS application

Is it possible to import SVG files and inline them in Angular?

Tips for efficiently expanding NodeJS while running it through an Apache web server?

Is the CSS scale activated by mouseover or click?

Issue Encountered While Deploying Next JS Application Utilizing Dynamic Routing