per @janiceilene: make the button outlined for the default and solid once pressed to help differentiate the two modes

Author: sarahs

includes/toggle-images.html

@@ -1,4 +1,4 @@
-<button type="button" class="btn btn-outline ml-3 toggle-images tooltipped tooltipped-n" id="js-toggle-images" aria-selected="true" aria-label="Toggle images">
+<button type="button" class="btn btn-outline ml-3 toggle-images" id="js-toggle-images" aria-selected="false" aria-label="Toggle images">
   <span id="js-hide-text">{% data ui.toggle_images.hide %}</span>
   <span id="js-show-text">{% data ui.toggle_images.show %}</span>
 </button>

javascripts/toggle-images.js

@@ -19,7 +19,14 @@ export default function () {
   // The button should say "Hide" by default, so we suppress the "Show" text here.
   showText.style.display = 'none'
 
+  // The selection state is set to false by default in the button HTML.
+  let selectionState = toggleImagesBtn.getAttribute('aria-selected') !== 'false'
+
   toggleImagesBtn.addEventListener('click', (e) => {
+    // On click, toggle the selection state.
+    selectionState = !selectionState
+    toggleImagesBtn.setAttribute('aria-selected', selectionState)
+
     // 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"