Show\Hide html element - pros and cons to each approach

Question

What are the pros and cons of each?

change the element style directly:

$('#element_to_hide').hide(); // when we want to hide
$('#element_to_hide').show(); // when we want to show

adding\removing class:

.hidden {display:none}
$('#element_to_hide').addClass('hidden');// when we want to hide
$('#element_to_hide').removeClass('hidden'); // when we want to show

Are there other methods, and if so, what are their pros and cons?

Answer 1

The hide and show functions from jquery is better because it does not just change the display. Lets say your display is inline-block, you will have to hardcode inline-block if you want your element visible again. If you just use hide and show it will change back to what it was before.

It is easier to read as well if someone else is going to work on your code.

Answer 2

Better are addClass() and removeClass() (and toggleClass()). Better, because it doesn't put inline styles to the DOM, so you can do whatever you want with this class in CSS.

Answer 3

The following are several different approaches and the pros and cons of each.

-

Changing display using addClass()/removeClass()

While setting up the example for this one, I actually ran into some flaws on this method that make it very very unreliable.

Css/Javascript:

.hidden {display:none}
$("#element_to_hide").addClass("hidden");  // To hide
$("#element_to_hide").removeClass("hidden");  // To unhide

Pros:

• It hides....sometimes. Refer to p1 on the example.
• After unhiding, it will return back to using the previous display value....sometimes. Refer to p1 on the example.
• If you want to grab all hidden objects, you just need to do $(".hidden").

Cons:

• Does not hide if the display value was set directly on the html. Refer to p2 on the example.
• Does not hide if the display is set in javascript using css(). Refer to p3 on the example.
• Slightly more code because you have to define a css attribute.

Example: https://jsfiddle.net/476oha8t/8/

-

Changing display using toggle()

Javascript:

$("element_to_hide").toggle();  // To hide and to unhide

Pros:

• Always works.
• Allows you to not have to worry about which state it was prior to switching. The obvious use for this is for a....toggle button.
• Short and simple.

Cons:

• If you need to know which state it is switching to in order to do something not directly related, you will have to add more code (an if statement) to find out which state it is in.
• Similar to the previous con, if you want to run a set of instructions that contains the toggle() for the purpose of hiding, but you don't know if it is already hidden, you have to add a check (an if statement) to find out first and if it is already hidden, then skip. Refer to p1 of the example.
• Related to the previous 2 cons, using toggle() for something that is specifically hiding or specifically showing, can be confusing to others reading your code as they do not know which way they will toggle.

Example: https://jsfiddle.net/cxcawkyk/1/

-

Changing display using hide()/show()

Javascript:

$("#element_to_hide").hide();  // To hide
$("#element_to_hide").show();  // To show

Pros:

• Always works.
• After unhiding, it will return back to using the previous display value.
• You will always know which state you are swapping to so you:
  1. don't need to add if statements to check visibility before changing states if the state matters.
  2. won't confuse others reading your code as to which state you are switching to if, if the state matters.
• Intuitive.

Cons:

• If you want to imitate a toggle, you will have to check the state first and then switch to the other state. Use toggle() instead for these. Refer to p2 of the example.

Example: https://jsfiddle.net/k0ukhmfL/

-

Changing display using css()

This method I do not recommend to use, but it is added for completeness.

Javascript:

$("#element_to_hide").css("display", "none");  // To hide
$("#element_to_hide").css("display", "");  // To unhide

Pros:

• Hides and unhides. That's about it.

Cons:

• If you use the "display" attribute for something else, you will have to hardcode the value of what it was prior to hiding. So if you had "inline", you would have to do $("#element_to_hid").css("display", "inline"); otherwise it will default back to "block" or whatever else that it will be forced into.
• Lends itself to typos.

Example: https://jsfiddle.net/4chd6e5r/1/

---

TL;DR. I consider the best approach to be Changing display using hide()/show() unless you specifically need it to be a toggle.