How do I make this jQuery Toggle function close

Question

I'm having trouble figuring out a way to get this toggle function to close. It will open happily, but closing is a different story.

Console Error: property 'toggle' of undefined at focusMobileSearch
Code:

function focusMobileSearch() {

    $('.mobile-search').removeClass('is-focused');

    function reveal() {
            $('.search-dropdown').css({ 'visibility': 'visible', 'height': '64px' });
            $('.input-group').delay('200').queue(function (next) {
                $(this).css('visibility', 'visible');
                next();
            });
    }

    reveal().toggle();

}

This was my Previous Code (it had a weird issue where the first click did nothing:

function focusMobileSearch() {

    $('.mobile-search').removeClass('is-focused');

    function reveal() {
        $('.search-dropdown').css({ 'visibility': 'visible', 'height': '64px' }).toggle();
        $('.input-group').delay('240').queue(function (next) {
            $(this).css('visibility', 'visible');
            next();
        }).toggle();
    }

    reveal();

}

Thanks!

Answer 1

Use a class for the toggle.

 function focusMobileSearch() { $('.mobile-search').removeClass('is-focused'); function reveal() { $('.search-dropdown').toggle('visible'); $('.input-group').delay('240').queue(function(next) { $(this).toggle('visible'); next(); }); } reveal(); } 

 .visible { visibility: visible; } .search-dropdown.visible { height: 64px; } 

Answer 2

This fixed it:

function focusMobileSearch() {

    $('.ef-header-alt__search').removeClass('is-focused');

    function reveal() {
        if ($('.search-dropdown').css('visibility') == 'hidden') {
            $('.search-dropdown').css({ 'visibility': 'visible', 'height': '64px' });
            $('.input-group').delay('240').queue(function (next) {
                $(this).css('visibility', 'visible');
                next();
            })
        } else {
            $('.search-dropdown').css({'visibility': 'hidden', 'height': '0px'});
            $('.input-group').css('visibility', 'hidden');
        }
    }

    reveal();

}

Big thanks to: @Taplar for letting me know toggle doesn't effect visibility, but rather just display property.