Solution 1 :

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 class="mainImg">


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%;

Problem :

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 but worried if it will be too much Javascript assuming I may have 20+ options on the page:

$("#img1").on('click', function() {
$("#img2").on('click', function() {
$("#img3").on('click', function() {
$("#img4").on('click', function() {

Could this be minified?


Comment posted by ZombieChowder

Usually you just use two colours, for selected and unselected.

Comment posted by Lowis

That is perfectly clean although instead of images I need DIV/html boxes if that makes sense. I’m thinking along the lines of getID of clicked and change from display:none > block to populate the inner html of the main box with the html that is selected?

Comment posted by Mohamed Ghoneim

do you mean that you have an div contains images and paragraphs and when you click on it all the contents appear in a bigger div . or you have a div with background image and when you click on it the image appears in anther div