Q:

Add collapse/expand to images by class

How can I add a Hide/Show (Collapse/Expand) feature to images on a page, based on class?
I want images with a particular class to be collapsed on load, and be prepended with some arbitrary markup defined in the JS (Let's say, <span>Show</span>), and then have different arbitrary markup (<span>Hide</span>) in the expanded state,
The content is generated from markdown, so I cannot add additional HTML, other than adding a class to the image.
I would prefer a solution that does not require an entire JS library be added to the site. This is a document-focused site with very little dynamic functionality.
(I have no "what I tried" code because I don't know what to try. Googling solutions comes up with lots of tutorials on how to write a single function to toggle a single element with lots of extraneous markup. I do not know how to use a class to simply attach this feature to an element, but I know it can be done and that is what I need.)
EDIT for clarification

This needs to work on an arbitrary number of elements on a page --- all the ones with the specific class.
The class can only be added to the element which is to be hidden/shown --- not to a containing element.
The problem I am specifically having in figuring out how to do this is: programmatically add Hide/show "buttons" that only affect the element that created them.

A:

function uniqId() {
  return Math.round(new Date().getTime() + (Math.random() * 100));
}

$(function(){
   // Do something on load
   $(".details").each(function(index){
    $(this).attr('id', uniqId());
    togl = "<span class='toggler' data-toggle='" + $(this).attr('id') + "'>Show</span><br>";
    $(this).before(togl);
    $(this).addClass('hidden');
   });
   
   $(".toggler").each(function(index){
     $(this).click(function(e){
       toggle_image = $('#' + $(this).attr('data-toggle'));
       if ($(this).text() == "Show") {
         $(this).text("Hide");
         toggle_image.removeClass("hidden");
       } else {
         $(this).text("Show");
         toggle_image.addClass("hidden");
       }
     })
   });
});
.hidden {
  display:none;
}
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

<img class="details" src="http://via.placeholder.com/200x200">
<br>
<img class="" src="http://via.placeholder.com/100x200">
<br>
<img class="details" src="http://via.placeholder.com/200x100">

Here's what it does:

To every element of class details:

adds an ID attribute
appends a <span>Show</span> element, with a data-toggle attribute referencing the image's ID and a class of toggler

To every toggler:

Add a click function that toggles the text (show/hide) and the visibility of the element with the id referenced in its data-toggle attribute

