you can do it like that

html :- any chosen image will appear in the empty div

<div class="SImgs">
    <img src="./imgs/652.jpg" onclick="getSrc(this.src)" alt="img">
    <img src="./imgs/3833.jpg" onclick="getSrc(this.src)" alt="img">
    <img src="./imgs/6617.jpg" onclick="getSrc(this.src)" alt="img">
    <img src="./imgs/4213114.jpg" onclick="getSrc(this.src)" alt="img">

</div>
 <div class="mainImg">

    </div>

javaScript :-

    function getSrc(clicked_src) {
        const d = document.querySelector('.mainImg');
        d.innerHTML = "<img src='" + clicked_src + "'>"
    }

css:- then you can style it as you like

    .SImgs {
        display: flex;
        flex-direction: column;
    }
    
    .SImgs img {
        width: 7rem;
        height: 5rem;
        cursor: pointer;
    }
    
    .mainImg {
        width: 25rem;
        height: 20rem;
        border: 1px solid black;
    }
    
    .mainImg img {
        height: 100%;
        width: 100%;
    }

I’d like to have a few options to choose from and show the selection as the main content. Similar to a picture lightbox etc but the thumbnails and main picture are html/content. I’d click a HTML box/div and it populates the larger/main box as the selection. I Could have used options <select> but images don’t work as options.
selection box image

If you know of any efficient ways to do this via HTML, CSS or Javascript please let me know.

I’ve found this code here http://jsfiddle.net/EhtrR/1238/ but worried if it will be too much Javascript assuming I may have 20+ options on the page:

$("#img1").on('click', function() {
   $("#div1").show();
   $("#div2,#div3,#div4").hide();
});
$("#img2").on('click', function() {
   $("#div2").show();
   $("#div1,#div3,#div4").hide();
});
$("#img3").on('click', function() {
   $("#div3").show();
   $("#div1,#div2,#div4").hide();
});
$("#img4").on('click', function() {
   $("#div4").show();
   $("#div1,#div2,#div3").hide();
});

Could this be minified?