how to hide image which is on top of another image when clicked another image

Question

i have six images as dot on which i have applied animation on click. all the six images have there respective text which glow/color:white when clicked on its respective dot/image now the problem is i have a image/icon on a image/dot which is not hiding when i click on another image/dot

two problems - 1. icon not hiding 2. dot/image not clickable again when clicked on another image/dot

Providing a video for better understanding ( https://streamable.com/ab999 )

in this video you will see i have a dot/image with its respective text ( build ) i have coded it like when page load it automatically gets clicked and animation happen.( which is happening as it is supposed to be happening )

you will see when i click any other image/dot (black icon on build text image/dot not hiding) and the build text image/icon is not clickable again because the black/icon is there and making it unclickable

Jquery i'm trying is this

$(function() {
  if($("#img1").click()){
    $(".icon").css("display","block");
    console.log("if");
  }
  else{
    $(".icon").css("display","none");
    console.log("else");
  }
});

i have put console.log just to check but my console only shows ("if") never goes to ("else")

img1 is id of dot/image

.icon is class of black icon which is on top of build image and having css property position:relaive

 <li class="paralx-dots"><span class="icon-text" id="1">Build</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" class="Active" data-box="div1" id="img1" tabindex="0"><span class="icon-position"><img src="images/logos/noun_build_1909132.svg" class="icon"></img></span></img></li> 

i want when i click on any another image/dot the black icon hides (display none) and when i click again on dot/image ( build ) it appear again

Answer 1

The reason why it always prints "if" is that $.click() is actually the shortcut of .trigger( "click" ), which will always return a jQuery object.

jQuery click reference

It appears to me that you actually want to use an event handler. Try things like $(".icon").on('click', yourFunction)

Answer 2

try this

 $(function() { $(".icon").css("display","none"); $("#img1").on("click", function() { $(".icon").css("display","block"); console.log("click"); })) }); 

Answer 3

You have to add action click to images like this.

$('img').click(function () { 
  if (this.id === 'img1') { 
    $(".icon").css("display","block"); 
  } else { 
    $(".icon").css("display","none"); 
  } 
})

Note that $("#img1").click() will trigger click.