how to toggle the same object for different object?

debugcn Published at Dev

Bhavik Joshi

actually I really dont know how to express my problem.

you can see my fiddle so you will come to know about problem.

as you can see in fiddle when I am clicking on the first image the pop up appears but when I am clicking on the other image the popup hides ..I know it is the togggling effect but what to to if I want when I click on second image so the first toggle should over than other should start?

My Code

    <div id='player-back'>
    <img src='http://s6.postimg.org/su0e7812l/player1.png' data-playerid="1" id='p1'/>
    <img src='http://s6.postimg.org/afpv38orx/player2.png' data-playerid="2" id='p2'/>
    <img src='http://s6.postimg.org/h7ga63drh/player3.png' data-playerid="3" id='p3'/>
    <div id='player-popup' style="display:none">
            <span>Player1</span>
    </div>
    </div>

$("img").click(function(){
    var top = $(this).offset().top + $(this).width() + 2;
    var left = $(this).offset().left - $(this).height() / 2;  
    $("#player-popup span").text("Player "+$(this).data("playerid")); 
    $("#player-popup").css({ top: top, left: left }).toggle('slow');

});


#player-back{
    height:250px; 
    background:#0F0;
}
#p1{
    margin-top:50px;
    margin-left:80px;
}
#p2{
    margin-left:150px;
}
#p3{
    margin-left:200px;
}
#player-popup{
    background:orange;
    height:27px;
    width:85px;
    border-radius:10px;
    text-align:center;
    position:absolute;
}

Sami

JSFiddle Demo

You need to hide your popup before toggle in case when you are clicking other object after one. So you can store previously clicked object in a variable like

var prevObj = null;
$("img").click(function(){    
    var top = $(this).offset().top + $(this).width() + 2;
    var left = $(this).offset().left - $(this).height() / 2;  
    $("#player-popup span").text("Player "+$(this).data("playerid")); 

    if(prevObj != this)
        $("#player-popup").hide();
    $("#player-popup").css({ top: top, left: left }).toggle('slow');    
    prevObj = this;
});

Collected from the Internet

Please contact [email protected] to delete if infringement.