What is the JavaScript equivalent of jQuery's hide() and show()?

Question

I have a simple hide and show jQuery code and I want to ask if there is equivalent of this to JavaScript? Here's my code.

$(document).ready(function() {
  $("#myButton").hide();
  $("#1").click(function() {
    $("#myButton").show();
    $("#myButton").click(function() {
      $("#myButton").hide();
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option id="1">Science</option>
</select>
<input type="button" value="Click" id="myButton" />

I have followed some codes from the comments below but they are not working:

<script>
  document.getElementById('myButton').style.display = 'none';

  function selectOptionsupdated(select) {
    document.getElementById('myButton').style.display = 'block';
  }
</script>

<select onSelect="selectOptionsupdated(this)">
  <option id="1">Science</option>
</select>
<input type="button" value="Click" id="myButton" />

What I want is at first the button is hidden, and when I click the <option> tag "Science" the button appears and when I click the button, the button is hidden after it is being clicked. And what if there are more <option> tags?

It's normally just setting and clearing the `display: none` style on elements I think. — Rup, Oct 07 '13 at 10:33
http://stackoverflow.com/questions/9614622/equivalent-of-jquery-hide-to-set-visibility-hidden — user2842104, Oct 07 '13 at 10:35
[Exact and reliable solution about how jQuery hide/show works](http://stackoverflow.com/q/8970184/1671639) — Praveen, Jan 29 '15 at 13:05

Vinay Pratap Singh Bhadauria · Accepted Answer · 2013-10-07T10:47:12.080

45

this is simple

document.getElementById('myElement').style.display = 'block'; // show
document.getElementById('myElement').style.display = 'none'; // hide

add a onSelect="selectOptionsupdated(this) in your select

then

function selectOptionsupdated(select){
//do your stuff here  
}

edited Oct 07 '13 at 10:47

answered Oct 07 '13 at 10:35

Vinay Pratap Singh Bhadauria

9,829
3
28
49

so for my select tag `var select1 = document.getElementById('1');` how to trigger when the option in select tag is clicked? should i use if else statement? – Francis Jessie S. Enriquez Jr. Oct 07 '13 at 10:40
like this? `` is it ok if there are more ` – Francis Jessie S. Enriquez Jr. Oct 07 '13 at 10:50
@But there is a problem, it won't work. I edited my question about it. – Francis Jessie S. Enriquez Jr. Oct 07 '13 at 11:12
you want to it in javascript or jquery – Vinay Pratap Singh Bhadauria Oct 07 '13 at 11:16
1

You can't rely on `display` property (it can be any of `inline`, `inline-block`, `flex`, etc..) If you want to handle it dynamically then check this [ANSWER](http://stackoverflow.com/a/8970232/1671639) – Praveen Jan 29 '15 at 13:03

score 4 · Answer 2 · edited Oct 07 '13 at 11:03

4

var myButton = document.getElementById('myButton');

//hide
myButton.style.display = 'none';

//show
myButton.style.display = 'block';

Update for your select tag..try this

html

<select id="list">
<option id="1">Science</option>
</select>

js

var list = document.getElementById('select');

list.addEventListener('change', listSelect, false);

function listSelect(){    
    var selected = list.options[list.selectedIndex].value;//Selected option value    //hide
    myButton.style.display = 'none';

    //show
    myButton.style.display = 'block'; 
}

edited Oct 07 '13 at 11:03

Harry

87,580
25
202
214

answered Oct 07 '13 at 10:33

Abhidev

7,063
6
21
26

so for my select tag `var select1 = document.getElementById('1');` how to trigger when the option in select tag is clicked? should i use if else statement? – Francis Jessie S. Enriquez Jr. Oct 07 '13 at 10:39
@Abhidev: The JS code part was formatted as blockquote. I have changed it to code format now. Please feel free to roll it back if you have any concerns. – Harry Oct 07 '13 at 11:04
hey thanx @Harry...tried changing it to code format but stackoverflow said there are no changes in the code so it didn't allow. :P – Abhidev Oct 07 '13 at 11:15

score 0 · Answer 3 · answered Oct 07 '13 at 10:37

0

document.getElementById("button").style.visibility="visible|hidden|collapse|inherit";

answered Oct 07 '13 at 10:37

kondapaka

132
1
10

5

It is always better to add an explanation to the answer mate. It will make it clearer for both OP and any future readers. Also, I think you are suggesting the use of one of those values and not all in a `|` separated format. – Harry Oct 07 '13 at 11:05
1

not op but visibilty:hidden still takes space on page unlinke display:none https://www.w3schools.com/cssref/playit.asp?filename=playcss_visibility&preval=hidden – GorvGoyl Aug 20 '20 at 09:26

What is the JavaScript equivalent of jQuery's hide() and show()?

3 Answers3

Linked