I have a thumbnail gallery with 6 images, being new to java, I want each image (icon) to display the text associated with it and hide the previously selected.
The code is rough, just wanting to get it functional for now, so I have only included the basics. Any help would be greatly appreciated.
This is what I have so far....
<main>
<div class="centre">
<div class="thumb" id="gallery">
<div class="imgthumb" id="web">
<img src="images/icn-web.svg" alt="" onclick="showBlurb(this);"/>
</div>
<div class="imgthumb" id="des">
<img src="images/icn-des.svg" alt=""/>
</div>
<div class="imgthumb" id="ads">
<img src="images/icn-ads.svg" alt=""/>
</div>
<div class="imgthumb" id="soc">
<img src="images/icn-soc.svg" alt=""/>
</div>
<div class="imgthumb" id="prnt">
<img src="images/icn-prnt.svg" alt=""/>
</div>
<div class="imgthumb" id="bus">
<img src="images/icn-bus.svg" alt=""/>
</div>
</div>
<div class="servblurb">
<div class="servblurbctn" id="hide1">
<h1>JUST WEB CHECKING</h1>
</div>
<div class="servblurbctn" id="hide2">
<h1>JUST DES CHECKING</h1>
</div>
<div class="servblurbctn" id="hide3">
<h1>JUST SOC CHECKING</h1>
</div>
</div></div>
</main>
CSS...
body, html {
margin: 0;
padding: 0;
}
.centre {
margin: auto;
width: 90%;
max-width: 1200px;
}
.thumb {
width: 100%;
height: auto;
padding: 2%;
overflow-x: scroll;
}
.imgthumb {
display: inline-block;
width: 12%;
padding: 2%;
height: auto;
margin: auto;
}
.imgthumb:hover {
opacity: 0.5;
transition: 0.4s;
cursor: pointer;
}
Javascript.... (this part is not sharp)
<script>
function showBlurb() {
var x = document.getElementById("????");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
To hide all the text by default:
.servblurbctn{display:none;}
Call your function with the id of element you want to show:
<div class="imgthumb" id="web">
<img src="images/icn-web.svg" alt="" onclick="showBlurb('hide1');"/>
</div>
Then the javascript (not java) would look like:
function showBlurb(id) {
var x = document.getElementById(id);
// hide all blurbs
var t = document.querySelectorAll(".servblurbctn");
t.forEach(e => { e.style.display = "none"; });
// show the selected blurb
document.getElementById(id).style.display = "block";
}