JSFiddle - React, Tailwind, and code Playground
HTML
<input type="checkbox" id="image1" class="imageBox" name="image1" checked>image 1</input>
<input type="checkbox" id="image2" class="imageBox" name="image2">image 2</input>
<div id="image1Container" class="imageContainer" style="display:none">image 1</div>
<div id="image2Container" class="imageContainer" style="display:none">image 2</div>
CSS
.imageContainer {
background-color: #DDD;
color: #888;
width: 200px;
height: 200px;
}
JavaScript
(function () {
var showImgBlock = function (img, container) {
(img.is(":checked")) ? container.show(500) : container.hide(300);
};
$(".imageBox").each(function () {
item = this.id;
showImgBlock($("#" + item), $("#" + item + "Container"));
}).click(function () {
item = this.id;
showImgBlock($("#" + item), $("#" + item + "Container"));
});;
})();