Hello i have problem on mobile device to prevent on click to another image to hide first. This is for hover effect and work fine :

$("div.mitarbeiterfoto")
        .mouseenter(function() { 
                var id = $(this).attr("id");
                var idInfo = $(this).attr("id").substr(5);
                ($(this).find('img').css('display', 'none'));
                ($('#' + id + '_o').css('display', 'block'));
                showInfo(idInfo);
        })

        .mouseleave(function() {
                var id = $(this).attr("id");
                var idInfo = $(this).attr("id").substr(5);
                ($(this).find('img').css('display', 'block'));
                ($('#' + id + '_o').css('display', 'none'));
                hideInfo(idInfo);
        });

but for mobile i try in this way:

var clickOrTouch = (('ontouchend' in window)) ? 'touchend' : 'click';


            $('div.mitarbeiterfoto').on(clickOrTouch, function(e) {

                var id = $(this).attr("id");
                var idInfo = $(this).attr("id").substr(5);

                  ($(this).find('img').css('display', 'none'));
                ($('#' + id + '_o').css('display', 'block'));

                showInfo(idInfo);






        });

but only show on every click information not prevent to be hide when click on another image. How to do this? Thanks!