Question

I would like to show only "#HideLgf" when "#LGF_info" is clicked/checked otherwise hide it, how is it possible ?

        $(document).ready(function(){
        $('#LGF_info').click(function() {
            $('#HideLgf').show(100);
        });

        $('#DDP_info').click(function () {
            $('#HideLgf').hide();
        });

        $('#EXW_info').click(function () {
            $('#HideLgf').hide();
        });


        $('#DDU_info').click(function () {
            $('#HideLgf').hide();
        });


    });
Was it helpful?

Solution

Easy. But I must admit that I'd probably change a lot more (e.g. use a class instead of show()/hide(), less IDs, a proper function, etc.), but as that's all you've provided us with. And using event delegation via on removes the often required domReady call and allows to reuse the callbacks on e.g. dynamically added content.

$(document)
    .on("click", "#DDP_info, #EXW_info, #DDU_info", function(e) {
        $("#HideLgf").hide();
    })
    .on("click", "#LGF_info", function(e) {
        $("#HideLgf").show(100);
    })
;

OTHER TIPS

Try using a multiple selector here to simplify your code,

$('#LGF_info,#DDP_info,#EXW_info,#DDU_info').click(function () {           
   var cache = $('#HideLgf');
   if(this.id == "HideLgf") {
    cache.stop().show(100);
   }
   else {
    cache.hide();
   } 
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top