html – The best way to toggle between displaying and hiding pictures created with JavaScript?

I’ve been away awhile, however we all the time come again, received’t we (even when nobody missed us;)?

What Am I Making an attempt to Obtain

Principally simply pictures, grouped with a main picture.

This main will all the time be proven and likewise serves because the content material for hyperlink with a OnClick motion.

<a onclick="toggleHidden('ImageGroup1')"><img src="…"></a>

Clicking the picture will then set off the perform toggleHidden.
This picture can be adopted by a number of pictures that ideally are hidden by default and may be proven when clicking on the first picture of the group.
Naturally, solely the pictures following the first picture shall toggle between being displayed or hidden.

What Makes It More durable

I would like the title attribute of the picture to be dynamic, i.e. has a quantity that must be calculated based mostly on the date. I solely discovered this possible by utilizing JavaScript, which means I create a picture utilizing const imgName = new Picture() after which add the attributes and lessons.
If I put these pictures right into a <div> or <span> aspect, give it an id and use aspect.getElementById in my perform toggleHidden, then the pictures are nonetheless proven. (Btw, I made it work with strange pictures, that’s pictures {that a} created utilizing HTML code like <img src="">.)

In Principle

I attempted two features. First, all pictures in the identical group have the identical class (right here ImageGroup1).

1st perform:

perform showHiddenClassElements(myClassName) {
  var hidimg = doc.getElementsByClassName(myClassName);
  if (hidimg.type.show === "none") {
    hidimg.type.show = "block";
  } else {
    hidimg.type.show = "none";
  }
}

I attempted a number of variations, utilizing an inversion like !== "none" (and corresponding adjustments within the code) and completely different attributes than preliminary or inline.

2nd perform:

perform toggleHiddenClass(myClassName) {
    var aspect = doc.getElementsByClassName(myClassName);
    aspect.classList.toggle("hiddenspan");

…the place hiddenspan incorporates solely show: none; – nothing works.

My Code

<type>
.Group2 {
}

.Group3 {
}

.fundamental {
width:150px;
top:225px;
}

.hiddenspan {
  show: none;
}
</type>

<script>
perform myFunction(myDIVid) {
  var x = doc.getElementById(myDIVid);
  if (x.type.show === "none") {
    x.type.show = "block";
  } else {
    x.type.show = "none";
  }
}

perform showHiddenClassElements(myClassName) {
  var hidimg = doc.getElementsByClassName(myClassName);
  if (hidimg.type.show === "none") {
    hidimg.type.show = "block";
  } else {
    hidimg.type.show = "none";
  }
}

perform toggleHiddenClass(myClassName) {
    var aspect = doc.getElementsByClassName(myClassName);
    aspect.classList.toggle("hiddenspan");

</script>

<physique>

<h2>Group 1</h2>

<a onclick="myFunction('Group1')"><img class="fundamental" src="01.gif" alt="01" title="01"></a>
<span id="Group1" class="hiddenspan">
<img class="fundamental" src="001.jpeg" alt="001" title="001">
<img class="fundamental" src="002.jpeg" alt="002" title="002">
<img class="fundamental" src="003.jpeg" alt="003" title="003">
</span>

<h2>Group 2</h2>

<a onclick="showHiddenClassElements('Group2')"><img class="fundamental" src="02.gif" alt="02" title="02"></a>
<script>var d1 = new Date(1994,1,31); var d2 = new Date(); var diff = d2.getTime() - d1.getTime(); var daydiff = (diff / 31557600000); const img02_001 = new Picture(); img02_001.src = "02/001.jpeg"; img02_001.classList.add("fundamental"); img02_001.classList.add("Group2"); img02_001.alt="001"; img02_001.title="001 ("+Math.flooring(daydiff)+" years outdated)"; doc.physique.appendChild(img02_001);</script>
<script>var d1 = new Date(2006,7,23); var d2 = new Date(); var diff = d2.getTime() - d1.getTime(); var daydiff = (diff / 31557600000); const img02_002 = new Picture(); img02_002.src = "02/002.jpeg"; img02_002.classList.add("fundamental"); img02_002.classList.add("Group2"); img02_002.alt="002"; img02_002.title="002 ("+Math.flooring(daydiff)+" years outdated)"; doc.physique.appendChild(img02_002);</script>

<h2>Group 3</h2>

<a onclick="showHiddenClassElements('Group3')"><img class="fundamental" src="03.gif" alt="03" title="03"></a>
<script>var d1 = new Date(1997,3,31); var d2 = new Date(); var diff = d2.getTime() - d1.getTime(); var daydiff = (diff / 31557600000); const img03_001 = new Picture(); img03_001.src = "03/001.jpeg"; img03_001.classList.add("fundamental"); img03_001.classList.add("Group3"); img03_001.alt="001"; img03_001.title="001 ("+Math.flooring(daydiff)+" years outdated)"; doc.physique.appendChild(img03_001);</script>
<script>var d1 = new Date(2016,10,23); var d2 = new Date(); var diff = d2.getTime() - d1.getTime(); var daydiff = (diff / 31557600000); const img03_002 = new Picture(); img03_002.src = "03/002.jpeg"; img03_002.classList.add("fundamental"); img03_002.classList.add("Group3"); img03_002.alt="002"; img03_002.title="002 ("+Math.flooring(daydiff)+" years outdated)"; doc.physique.appendChild(img03_002);</script>

<h2>Group 4</h2>

<a onclick="myFunction('Group4')"><img class="fundamental" src="03.gif" alt="03" title="03"></a>
<span id="Group4" class="hiddenspan">
<script>var d1 = new Date(1997,3,31); var d2 = new Date(); var diff = d2.getTime() - d1.getTime(); var daydiff = (diff / 31557600000); const img03_001 = new Picture(); img03_001.src = "03/001.jpeg"; img03_001.classList.add("fundamental"); img03_001.classList.add("Group3"); img03_001.alt="001"; img03_001.title="001 ("+Math.flooring(daydiff)+" years outdated)"; doc.physique.appendChild(img03_001);</script>
<script>var d1 = new Date(2016,10,23); var d2 = new Date(); var diff = d2.getTime() - d1.getTime(); var daydiff = (diff / 31557600000); const img03_002 = new Picture(); img03_002.src = "03/002.jpeg"; img03_002.classList.add("fundamental"); img03_002.classList.add("Group3"); img03_002.alt="002"; img03_002.title="002 ("+Math.flooring(daydiff)+" years outdated)"; doc.physique.appendChild(img03_002);</script>
</span>
</physique>

Clearly the code has been simplified, particularly the HTML half (no <h1> header, no HTML declaration), however it’s best to get the concept.

For Group 1 the code works flawlessly (nearly, apart from a line break after the first picture, however I might dwell with that), the identical perform with pictures generated with JavaScript (Group 4) will show the pictures, as if the <span> aspect with its id and class weren’t even there.

The opposite features for group 2 and three don’t work in any respect, as if getElementsByClassName doesn’t work in any respect. That is what I consider.

So what do you assume? Is there a technique to toggle the show of those pictures?