showing/hiding html elements with javascript

Question

which option among the following is better or used as a standard way to show/hide the html elements

changing element.style.display
adding/removing a separate class called hide {display: none}
any other standard way

PS: this JavaScript hide/show element question uses the first option mentioned( changes the style to block to show which may not be desired). I would like to know whether this method is used in most websites or the adding /removing a separate class or any other way

A third way in the answers below https://stackoverflow.com/a/68983509/14478972

Does this answer your question? [JavaScript hide/show element](https://stackoverflow.com/questions/6242976/javascript-hide-show-element) — GucciBananaKing99, Aug 30 '21 at 11:16
this question uses the first option mentioned( changes the style to block to show which may not be desired). I would like to know whether this method is used in most websites or the adding /removing a separate class or any other way — Squiba, Aug 30 '21 at 11:20
For a better control it's preferably use of classes. This way you can hide multiple independent elements with simply adding/removing a class from a parent or even body itself. — vanowm, Aug 30 '21 at 11:23

score 3 · Accepted Answer · answered Aug 30 '21 at 11:22

3

I prefer to toggle a class using DOMTokenList.toggle():

The toggle() method of the DOMTokenList interface removes a given token from the list and returns false. If token doesn't exist it's added and the function returns true.

answered Aug 30 '21 at 11:22

Mamun

66,969
9
47
59

so thats similar to the option 2- adding and removing a separate class – Squiba Aug 30 '21 at 11:29
@Squiba, not really, as you have mentioned `{display: none}` in that option. – Mamun Aug 30 '21 at 11:32
1

no a separate class .hide { display: none} which can be toggled @Mamun – Squiba Aug 30 '21 at 11:33
@Squiba, yes, in that case it is option 2. – Mamun Aug 30 '21 at 11:34

score 1 · Answer 2 · edited Sep 02 '21 at 04:55

1

Option 1 would be standard for only hiding the element, but if you would like to add other styles like transitions and pointer events option 2 is preferred

edited Sep 02 '21 at 04:55

marc_s

732,580
175
1,330
1,459

answered Aug 30 '21 at 11:23

Mr. Programmer

95
1
10

score 1 · Answer 3 · answered Aug 30 '21 at 11:40

1

Well except the first and second, there is the other way. Which is rendering the element its self.

It has a better security. as the user wont know if there is a hidden element inside the toggle div. Eg when people try to look at the html

Have a look below

I used jQuery as its easier to write. If you are not able to rewrite a JavaScript version will be happy to rewrite for you.

var items = $(".toggle");
var item = {};
// setup the auto toggle
$(".toggle").each(function(el) {
  var id = new Date().getUTCMilliseconds() + $(this).index()
  item[id] = $(this).find("content")
  if (!$(this).hasClass("show")){
  $(this).find("content").remove();
  }
   $(this).attr("id", id)
});

$(".toggle").click(function() {
  if ($(this).find("content").length > 0)
    $(this).find("content").remove();
  else $(this).append(item[$(this).attr("id")])

  
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggle">
  <h1>click here to toggle content </h1>
  <content>
    this is a test
  </content>
</div>

<div class="toggle show">
  <h1>click here to toggle content(start state is visible) </h1>
  <content>
    this is a test
  </content>
</div>

answered Aug 30 '21 at 11:40

Alen.Toma

4,684
2
14
31

thanks for clarifying. first to mention that I have never used jquery/ never seen any code with it. So why user won't know that there is an hidden element inside the toggle div. the html is always visible ? @Alen.Toma – Squiba Aug 30 '21 at 11:55
When you toggle a class, You only hide or show the element inside toggle with css. So when I for example click on f12 on chrome, I could see what is inside the toggle element. The option I provided remove and add the element it self, so for some reason you have a condition to show the element inside Then this is the best option as I as a user wont be able to see or edit the content inside the toggle element. Its all depends on what you would like to use and what is the used for. – Alen.Toma Aug 30 '21 at 12:00
ok, but anyway content can always be seen from console @Alen.Toma – Squiba Aug 30 '21 at 12:03
No, Ok try and see the element on the console. If you do not provide it then no it wont appear – Alen.Toma Aug 30 '21 at 12:04
ok, thats a good way to do things if needed – Squiba Aug 30 '21 at 12:13

showing/hiding html elements with javascript

3 Answers3