Simple trigger element for show/hide overlay (best practice)

Question

I am confused. I have a simple trigger element which is showing/hiding an element, but I can never seem to get it to work with just one element. I think it may be the way I am building my JS, but I don't understand why it won't work. Here is a few variations doing the same thing but none of them seem to work.

Any help? Thanks.

function overlays() {
    $('.header-container .info-trigger').on('click touchstart', function(e) {
        $(this).addClass('active');
        $('body').addClass('overlay-open');
        $('.info-overlay').fadeIn('fast');
        e.preventDefault();
    });
    $('.header-container .info-trigger.active').on('click touchstart', function(e) {
        $('.info-overlay').fadeOut('fast', function() {
            $('.info-overlay').removeAttr('style');
        });
        $('body').removeClass('overlay-open');
        e.preventDefault();
    });
}
overlays();


function overlays() {
    if ($('body').is('.overlay-open')) {
        $('.header-container .info-trigger').on('click touchstart', function(e) {
            $('.info-overlay').fadeOut('fast', function() {
               $('.info-overlay').removeAttr('style');
            });
            $('body').removeClass('overlay-open');
            e.preventDefault();
        });
    } else {
        $('.header-container .info-trigger').on('click touchstart', function(e) {
            $('body').addClass('overlay-open');
            $('.info-overlay').fadeIn('fast');
            e.preventDefault();
        });
    }
}
overlays();


function overlays() {
    $('.header-container .info-trigger').on('click touchstart', function(e) {
        $('body').addClass('overlay-open');
        $('.info-overlay').fadeIn('fast');
        e.preventDefault();
    });
    $('body.overlay-open .header-container .info-trigger').on('click touchstart', function(e) {
        $('.info-overlay').fadeOut('fast', function() {
            $('.info-overlay').removeAttr('style');
        });
        $('body').removeClass('overlay-open');
        e.preventDefault();
    });
}
overlays();

Answer 1

$('body').is('overlay-open')

should be

$('body').is('.overlay-open')

You seem to be missing the class selector . all over the place.

In your it is checking for an element named overlay-open which I think is a class that you are applying to the body.

Also it is a bad idea to add click events based on conditionals.

Better way is to assign a single event handler and use conditionals inside it to get it working.

function overlays() {
    $('.header-container .info-trigger').on('click touchstart', function (e) {
        e.preventDefault();

        var $this = $(this); // cache selector
        // Check for active class and do the action
        if ($this.hasClass('active')) {
            $('.info-overlay').fadeOut('fast', function () {
                $('.info-overlay').removeAttr('style');
            });
            $('body').removeClass('overlay-open');
        } else {
            $this.addClass('active');
            $('body').addClass('overlay-open');
            $('.info-overlay').fadeIn('fast');
        }
    });
}
overlays();

Answer 2

please bind with document of every click

$(document).on('click touchstart','.header-container .info-trigger', function(e) {

if still not working then show error console