Is display = "show" a thing?

Question

I'm learning JavaScript, and in looking at some code that's used to show/hide an unordered list item based on a condition, they have:

 myArray[i].style.display = "show";

I understand

style.display = "block"

But I cannot find any documentation on "show". Is this an attribute specific to JavaScript? There's no CSS attribute of "show" that I can find anywhere. But it works.

Not an attribute. If it works, the browser probably assumes `block` or `inline-block` because that option is invalid — KetZoomer, Jul 27 '21 at 15:23
It's a bug in the JS. The browser is probably ignoring it, and treating it as if the element has no `display` property at all. Since the default is to show the element, it happens to work. — Barmar, Jul 27 '21 at 15:25
it's probably an error of the person who wrote it, quite possibly meant to add a class called `show`, or `display: block` or `visibility: visible;` — nick zoum, Jul 27 '21 at 15:29
Hey! Do you know jQuery? I know, that some people prefer vanilla JS, but in jQuery you could do something like: $(myArray[i]).show(); More or less... Otherwise just use display block or display none. — Kurt Lagerbier, Jul 27 '21 at 15:31
Wow. So it's just bunk code. Indeed the browser is ignoring it and just displaying it normally. I replaced "show" with "test" and nothing changed. Oh man. Nice work IT!! — Espskully, Jul 27 '21 at 15:36
Yes, it is the opposite of "hidden" thus this is vacuously true valid syntax. There are many historical calls to show. — , Jul 28 '21 at 02:48

Abdelrahman Hatem · Answer 1 · 2021-07-27T20:29:52.293

1

display:show is never be a property in CSS or JavaScript style display property. Here you can look at all possible values for display style property which show is not one of them.

But may be you mean jQuery functions called show and hide.

Yes you can understand more about them here .show() and .hide() , Good luck!

edited Jul 27 '21 at 20:29

answered Jul 27 '21 at 15:28

Abdelrahman Hatem

1,028
1
9
20

score 0 · Answer 2 · answered Jul 27 '21 at 20:40

display: show is not a valid css syntax and property. You can use inline block... instead.

You can also use visibility & opacity which have other use cases, but we can say they are a little the same. You can read about it here.

const section = document.querySelector('section');

document.querySelector('.show').addEventListener('click', () => {
  section.style.display = 'block';
  }
)

document.querySelector('.hide').addEventListener('click', () => {
  section.style.display = 'none';
  }
)

section {
  width: 100px;
  height: 100px;
  background-color: orange
}

<section></section>
<button class="show">Show</button>
<button class="hide">Hide</button>

Is display = "show" a thing?

2 Answers2