Equivalent of jQuery .hide() to set visibility: hidden

Crafted jQuery Plugins

You can tailor jQuery with custom plugins to hide elements akin to .hide():

// Packing a one-two punch with visible and invisible
(function($) {
    $.fn.invisible = function() {
        return this.css('visibility', 'hidden');
    };
    $.fn.visible = function() {
        return this.css('visibility', 'visible');
    };
})(jQuery);


Implement visibility with these nifty methods:

// Now you see me, now you don't!
$(".your-element").invisible();       // Hide element with visibility
$(".your-element").visible();         // Show element with visibility


Have a first-hand experience with this jsFiddle link: http://jsfiddle.net/

Hiding in Plain Sight with CSS Classes

Create a .hidden class and manage it using jQuery's .toggleClass():

.hidden {
    visibility: hidden;
}

// An element has never toggled so stylishly!
$(".your-element").toggleClass('hidden');


Achieve animated transitions using jQuery UI's toggleClass method:

// It's a 'hide and seek' party happening over 1000ms!
$(".your-element").toggleClass('hidden', 1000); 


Control classes efficiently for optimal performance and versatile styling.

Abandoning the jQuery Ship

With native JavaScript *, you can manage element visibility as efficiently:

// Just toggling - no big deal!
const elem = document.querySelector('.your-element');
elem.classList.toggle('hidden');


These modern JavaScript tools offer fluency and greater control over your elements.

Fluent JavaScript : A Lesson in Elegance

Craft fluent interfaces in element manipulation with class methods:

class DomElement {
    constructor(selector) {
        this.elem = document.querySelector(selector);
    }

    hide() {
        // Ghost mode activated!
        this.elem.style.visibility = 'hidden';
        return this;
    }

    show() {
        // Here I am, world!
        this.elem.style.visibility = 'visible';
        return this;
    }
}

// Just a friendly game of peek-a-boo between hide and show
new DomElement('.your-element').hide().show();


But remember kids, prototype manipulation is a no-go area. Keep it elegant!

The Magic of Transition Effects

Who doesn't love a good animation?

// Time for a dramatic exit with fadeout
$('.your-element').fadeOut('slow', function() {
    $(this).css('visibility', 'hidden').show();
});


Use CSS animations to create a beautiful blend between visibility and opacity all in pure JavaScript.

Pitfalls Watchlist

Steer clear of these black holes:

• Do not extend native prototypes like HTMLElement. They aren't fond of surprises!
• Beware of JavaScript style property's tempting offerings. They come with potential performance bottlenecks.
• Avoidance is key when it comes to overloading existing jQuery methods. No one likes a traffic jam!

Conscious and consistent handling of visibility is key to a smooth ride in the GUI world.