toggle many hidden objects at once

October 11, 2024

I have a blue square and when I hover over it, two other objects should appear.

So far, only one object (the text) appears and the other one (the red square) remains hidden.

How do I make that on hovering the blue square both, the red square and the text appear?

var canvas = document.getElementById("svg_canvas");

var square = document.createElementNS('http://www.w3.org/2000/svg',"rect");
square.setAttribute('x', 100)
square.setAttribute('y',  100)
square.setAttribute('width', 100)
square.setAttribute('height', 100)
square.setAttribute("fill", "blue");
square.setAttribute("class", "HoveringClass");
canvas.appendChild(square);

var hover_text = document.createElementNS('http://www.w3.org/2000/svg', "text");
hover_text.setAttribute('id','termin_text');
hover_text.setAttribute('x', 200)
hover_text.setAttribute('y',  200)
hover_text.setAttribute("class", "hide");
hover_text.textContent = "hello world";
canvas.appendChild(hover_text);

var square2 = document.createElementNS('http://www.w3.org/2000/svg',"rect");
square2.setAttribute('id','termin_rect' + 1);
square2.setAttribute('x', 50)
square2.setAttribute('y',  50 )
square2.setAttribute('width', 50)
square2.setAttribute('height', 50)
square2.setAttribute("fill", "red");
square2.setAttribute("class", "hide");
canvas.appendChild(square2);

<svg id="svg_canvas" viewBox="0 0 1200 600" width="1200px" height="600px" xmlns="http://www.w3.org/2000/svg"></svg>

>Solution :

To make both the red square and the text appear when you hover over the blue square, you’ll need to add event listeners for mouse events

<svg id="svg_canvas" viewBox="0 0 1200 600" width="1200px" height="600px" xmlns="http://www.w3.org/2000/svg"></svg>

<script>
  var canvas = document.getElementById("svg_canvas");

  var square = document.createElementNS('http://www.w3.org/2000/svg', "rect");
  square.setAttribute('x', 100);
  square.setAttribute('y', 100);
  square.setAttribute('width', 100);
  square.setAttribute('height', 100);
  square.setAttribute("fill", "blue");
  square.setAttribute("class", "HoveringClass");
  canvas.appendChild(square);

  var hover_text = document.createElementNS('http://www.w3.org/2000/svg', "text");
  hover_text.setAttribute('id', 'termin_text');
  hover_text.setAttribute('x', 200);
  hover_text.setAttribute('y', 200);
  hover_text.setAttribute("class", "hide");
  hover_text.textContent = "hello world";
  canvas.appendChild(hover_text);

  var square2 = document.createElementNS('http://www.w3.org/2000/svg', "rect");
  square2.setAttribute('id', 'termin_rect');
  square2.setAttribute('x', 50);
  square2.setAttribute('y', 50);
  square2.setAttribute('width', 50);
  square2.setAttribute('height', 50);
  square2.setAttribute("fill", "red");
  square2.setAttribute("class", "hide");
  canvas.appendChild(square2);

  // Add hover event listeners
  square.addEventListener('mouseover', function() {
    hover_text.setAttribute("class", "show");
    square2.setAttribute("class", "show");
  });

  square.addEventListener('mouseout', function() {
    hover_text.setAttribute("class", "hide");
    square2.setAttribute("class", "hide");
  });
</script>

<style>
  .hide {
    display: none;
  }
  
  .show {
    display: inline;
  }
</style>

I’ve added mouseover and mouseout event listeners to the blue square. When you hover over it, both the text and the red square will show, and when you move the mouse out, they’ll hide again.

The hide class uses display: none; to hide elements. The show class uses display: inline; to make elements visible.