I figured it out and even simplified the code a little.
This code can work on arbitrary number of containers as long as they have individual buttons for opening an overlay and share DOM structure.
This is a partial solution for a problem with responsive layout driven by text amount discussed here:
// OVERLAY TOGGLE
function toggleOverlay(overlay) {
// toggle overlay on div with "overlay" class
overlay.currentTarget.nextElementSibling.classList.toggle("over-show");
// RESPONSIVE IMAGE LAYOUT
// get text wrapper and toggle a temporary class
overlay.currentTarget.nextElementSibling.firstElementChild.classList.toggle("read-height");
// call image resize function
resize();
}
// RESIZE IMAGE
window.onresize = resize;
function resize() {
// get text div
let textBox = document.querySelector('.read-height');
// get text div height
let textHeight = document.querySelector('.read-height').offsetHeight;
// calculate overlay image height
let imageHeight = window.innerHeight - textHeight;
// get image div
let imageBox = document.querySelector('.over-show').lastElementChild;
// resize image div
if (textBox === null) {
return
} else {
imageBox.style.height = imageHeight + "px";
}
}