trivial visibility toggle: a why and the how

I have a blog I've been adding to daily since 2000. It's now a lovely resource for my personal retrospection, including an on this day feature and a tag cloud (my most used tends to be kirk.is/tag/tuba for glamour shots of me and my beloved sousaphone.)

Incidentally, it took me way too many years to realize that since my blog was kind of my "statement of record", when I upload personal photos I should include a link to the full-size versions. Ah well, lesson learned, and now that kind of auto-resizing and linking is just a part of my upload workflow.

Sometimes on those conglomarated pages it's frustrating since a day's entry with a large photo gallery will take up an inordinate amount of space on the page. I decided I wanted a simple solution without relying on external js libraries or fixed css blocks to just show a "Click for Photo Library" toggle link with the photos hidden after that link.

So, that's trivial for any competent web UI person, but here it is for my own future copy and pasting:

<h2 style="cursor:pointer;" class="hidden-gallery-clicker" onclick="var gal = this.nextElementSibling; gal.style.display = gal.style.display == '' ? 'none' : '';">Click for Photo Gallery</h2>
<div class="hidden-gallery" style="display:none;">
Oh now I see it!
</div>

I decided to insert a gratuiotus "hidden-gallery" class, to hedge against me wanting to set up "click here to view ALL galleries at once" feature.

The javascript borrows from You Might Not Need JQuery which is a very handy reference. 

Now, to just go back and edit all those dang pages.

FOLLOWUP: As satisfying as it is to have a daily blog for over 15 years, this devblog's run of 7 or so years ain't half bad either!