for example, all images are hidden and when I click list, it should pop up. if I click "Hello1" text then image1 should popup
<li class nav-1><a href="#">Hello1</a></li>
<li class nav-1><a href="#">Hello2</a></li>
<li class nav-1><a href="#">Hello3</a></li>
<img src="images/1.jpg" alt=""/>
<img src="images/2.jpg" alt=""/>
<img src="images/3.jpg" alt=""/>
I would add id's to your images and put in a basic hide/unhide script:
<script>
function toggleHide(elementid){
a=document.getElementById(elementid).style.visibility;
if (a=="hidden"){
document.getElementById(elementid).style.visibility="visible";
}else{
document.getElementById(elementid).style.visibility="hidden";
}
}
</script>
<style>
/* hide all images */
#img1{
visibility:hidden;
}
#img2{
visibility:hidden;
}
#img3{
visibility:hidden;
}
</style>
<li class nav-1><a href="#" onclick="toggleHide('img1')">Hello1</a></li>
<li class nav-1><a href="#" onclick="toggleHide('img2')">Hello2</a></li>
<li class nav-1><a href="#" onclick="toggleHide('img3')">Hello3</a></li>
<img src="images/1.jpg" id="img1" alt=""/>
<img src="images/2.jpg" id="img2" alt=""/>
<img src="images/3.jpg" id="img3" alt=""/>
In the example below, I used div instead of img, but the concept is the same...
Read the comments for more details please:
// Get the buttons and the images
let buttons = document.querySelectorAll('.btn');
let images = document.querySelectorAll('.image');
// For each button:
buttons.forEach(btn => {
// Onclick event:
btn.addEventListener('click', () => {
// Get all the images and remove the 'active' class
images.forEach(image => { image.classList.remove('active'); });
// Get the id of the clicked button (which is the data-image of the target image)
let target = btn.getAttribute('id');
// Add the class 'active' to the image
document.querySelector(`[data-image="${target}"]`).classList.add('active');
});
});.image {
width: 100px;
height: 100px;
border: 1px solid;
opacity: 0;
transition: all 0.2s;
display: none;
}
.image.active {
opacity: 1;
display: block;
}<button class="btn" id="image1">Image 1</button>
<button class="btn" id="image2">Image 2</button>
<button class="btn" id="image3">Image 3</button>
<div class="image" data-image="image1">1</div>
<div class="image" data-image="image2">2</div>
<div class="image" data-image="image3">3</div>