Equivalent of jQuery hide to set visibility hidden

Question

In jQuery  there are  hide   and  show   methods which sets the CSS display  none setting    Is there an equivalent function which would set the visibility  hidden setting    I know I can use  css   but I prefer some function like  hide   or so  Thanks

User · Accepted Answer

You could make your own plugins   jQuery fn visible   function         return this css  visibility    visible        jQuery fn invisible   function         return this css  visibility    hidden        jQuery fn visibilityToggle   function         return this css  visibility   function i  visibility            return  visibility     visible      hidden     visible                If you want to overload the original jQuery toggle    which I don t recommend       function          var toggle     fn toggle        fn toggle   function             var args     makeArray arguments               lastArg   args pop             if  lastArg     visibility                 return this visibilityToggle                       return toggle apply this  arguments             jQuery     jsFiddle

User · Answer

There isn t one built in but you could write your own quite easily    function            fn invisible   function             return this each function                   this  css  visibility    hidden                             fn visible   function             return this each function                   this  css  visibility    visible                         jQuery      You can then call this like so       someElem   invisible        someOther   visible      Here s a working example

User · Answer

Here s one implementation  what works like   prop name  value   or   attr name  value   function  If b variable is filled  visibility is set according to that  and this is returned  allowing to continue with other properties   otherwise it returns visibility value   jQuery fn visible   function  b        if b     undefined          return this css  visibility     visible       else           this css  visibility   b   visible     hidden            return this            Example       result   visible true  on  click  someFunction   if     result   visible        do something

User · Answer

An even simpler way to do this is to use jQuery s toggleClass   method  CSS   newClass visibility  hidden    HTML   lt a href     class trigger gt Trigger Element  lt  a gt   lt div class  hidden element  gt Some Content lt  div gt    JS    document  ready function            trigger   click function                hidden element   toggleClass  newClass

User · Answer

If you only need the standard functionality of hide only with visibility hidden to keep the current layout you can use the callback function of hide to alter the css in the tag  Hide docs in jquery  An example        subs selection box   fadeOut  slow   function             this  css   visibility   hidden             this  css   display   block           This will use the normal cool animation to hide the div  but after the animation finish you set the visibility to hidden and display to block   An example   http   jsfiddle net bTkKG 1   I know you didnt want the     aa   css   solution  but you did not specify if it was because using only the css   method you lose the animation

User · Answer

Pure JS equivalent for jQuery hide   show      function hide el        el style visibility    hidden           return el     function show el        el style visibility    visible           return el     hide document querySelector   test        hide     test   0        usage with jQuery   We use return el due to satisfy fluent interface  desing pattern      Here is working example     Below I also provide HIGHLY unrecommended alternative  which is however probably more  close to question  answer   HTMLElement prototype hide   function         this style visibility    hidden         return this     HTMLElement prototype show   function         this style visibility    visible         return this     document querySelector   test1   hide           test1   0  hide         usage with jQuery   of course this not implement jQuery  each   given in  JamesAllardice answer  because we use pure js here    Working example is here

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

Examples related to javascript

Examples related to jquery

Examples related to css

Examples related to visibility