take the button text toggle out of the for loop, and hide the button if no images

Author: sarahs

javascripts/toggle-images.js

@@ -4,29 +4,39 @@ export default function () {
   const toggleImagesBtn = document.getElementById('js-toggle-images')
   if (!toggleImagesBtn) return
 
+  const images = document.querySelectorAll('img')
+
+  // If there are no images on the page, hide the button entirely and return.
+  if (!images.length) {
+    toggleImagesBtn.style.display = 'none'
+    return
+  }
+
   const hideText = document.getElementById('js-hide-text')
   const showText = document.getElementById('js-show-text')
 
   // For localization friendliness, the button HTML includes both show and hide text.
   // The button should say "Hide" by default, so we suppress the "Show" text here.
   showText.style.display = 'none'
 
-  const images = document.querySelectorAll('img')
-
   toggleImagesBtn.addEventListener('click', (e) => {
+    // Check first image to see if images are currently hidden; if so, and there is a click to show them...
+    if (images[0].style.display === 'none') {
+      // Button should say "Hide"
+      showText.style.display = 'none'
+      hideText.style.display = 'inline'
+    } else {
+      // Button should say "Show"
+      showText.style.display = 'inline'
+      hideText.style.display = 'none'
+    }
+
+    // Toggle the images on click.
     for (const img of images) {
       if (img.style.display === 'none') {
-        // Show images
         img.style.display = 'block'
-        // Say "Hide"
-        showText.style.display = 'none'
-        hideText.style.display = 'inline'
       } else {
-        // Hide images
         img.style.display = 'none'
-        // Say "Show"
-        showText.style.display = 'inline'
-        hideText.style.display = 'none'
       }
     }