Question

I Have few divs in my code as shown below

 <div id="Toggle_ACicon">
       <img id = "imgACicon" src = "../images/Zone4/Z4_Ac-Button-released.png">
       <img id = "imgACiconPressed" src = "../images/Zone4/Z4_Ac-Button-pressed-hi.png">
    </div>

    <div id="Toggle_FanLeft">
       <img id = "imgFanLeft" src = "../images/Zone4/Z4-Fan-Dial-left-released.png">
       <img id = "imgFanLeftPressed" src = "../images/Zone4/Z4-Fan-Dial-left-pressed-hi.png">
    </div>

    <div id="Toggle_FanRight">
       <img id = "imgFanRight" src = "../images/Zone4/Z4-Fan-Dial-right-released.png">
       <img id = "imgFanRightPressed" src = "../images/Zone4/Z4-Fan-Dial-right-pressed-hi.png">
    </div>

The two images in every div is to display for default state and clicked state on every click of that div. Below code does it for every div (toggling on clicks)

$("#Toggle_FanRight").click(function()
{
    $(this).find('img').toggle();
});

my requirement is that, Toggle_FanLeft and Toggle_FanRight should take click events only when Toggle_ACicon is selected, else the click on them should be disabled. One click on Toggle_ACicon should make them active and enable them to take click events.

Please help me !! Thanks in advance .

Was it helpful?

Solution

Check if the image is visible before toggling.

$("#Toggle_FanRight").click(function()
{
    if($("#Toggle_ACicon").find("img").is(":visible")){
       $(this).find('img').toggle();
    }
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top