Why my show hide button needs double-click on first time Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern) Data science time! April 2019 and salary with experience The Ask Question Wizard is Live!Why element.style always return empty while providing styles in CSS?Trigger a button click with JavaScript on the Enter key in a text boxUse jQuery to hide a DIV when the user clicks outside of itToggle button, show and hide an element, but move button simultaneouslyHiding and Showing Elements with JavaScript or jQueryShow/hide button: put result into POST variablehide on window and other element clickCannot display HTML stringShow/Hide onClick button not workingi want to create a little drop down div on my hompage. when a button is clicked it show the drop down when clicked it goesShow div using button and hide it if click outside the div
Should a wizard buy fine inks every time he want to copy spells into his spellbook?
What is an "asse" in Elizabethan English?
Flight departed from the gate 5 min before scheduled departure time. Refund options
Why is it faster to reheat something than it is to cook it?
What do you call the main part of a joke?
Why can't I install Tomboy in Ubuntu Mate 19.04?
What is the chair depicted in Cesare Maccari's 1889 painting "Cicerone denuncia Catilina"?
The Nth Gryphon Number
Project Euler #1 in C++
One-one communication
How can I prevent/balance waiting and turtling as a response to cooldown mechanics
Google .dev domain strangely redirects to https
How do living politicians protect their readily obtainable signatures from misuse?
How could we fake a moon landing now?
Can the Flaming Sphere spell be rammed into multiple Tiny creatures that are in the same 5-foot square?
Is CEO the "profession" with the most psychopaths?
How long can equipment go unused before powering up runs the risk of damage?
Trademark violation for app?
Why do early math courses focus on the cross sections of a cone and not on other 3D objects?
Significance of Cersei's obsession with elephants?
Output Devanagari (Hindi) from raw unicode using luatex
Why weren't discrete x86 CPUs ever used in game hardware?
Why does it sometimes sound good to play a grace note as a lead in to a note in a melody?
Crossing US/Canada Border for less than 24 hours
Why my show hide button needs double-click on first time
Announcing the arrival of Valued Associate #679: Cesar Manara
Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern)
Data science time! April 2019 and salary with experience
The Ask Question Wizard is Live!Why element.style always return empty while providing styles in CSS?Trigger a button click with JavaScript on the Enter key in a text boxUse jQuery to hide a DIV when the user clicks outside of itToggle button, show and hide an element, but move button simultaneouslyHiding and Showing Elements with JavaScript or jQueryShow/hide button: put result into POST variablehide on window and other element clickCannot display HTML stringShow/Hide onClick button not workingi want to create a little drop down div on my hompage. when a button is clicked it show the drop down when clicked it goesShow div using button and hide it if click outside the div
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I have this show/hide button on my website. It works, but on the first time the user needs to double-click it as if the switch is set to "hide" but the element is already hidden...
I'd like to edit my code so the button shows the element with a single click on the first time
I'm new to javascript, so I don't know how to change this.
Thank you
function showhidemenu()
var x = document.getElementById("menu");
if (x.style.display === "none")
x.style.display = "block";
else
x.style.display = "none";
#menu
background: rgba(0, 0, 0, 0);
position: absolute;
z-index: 1;
top: 60px;
right: 50px;
width: 150px;
font-family: 'Open Sans', sans-serif;
display: none;
<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>javascript html css button show-hide
asked Mar 8 at 22:09
Louis ChausséLouis Chaussé
73
add a comment |
I have this show/hide button on my website. It works, but on the first time the user needs to double-click it as if the switch is set to "hide" but the element is already hidden...
I'd like to edit my code so the button shows the element with a single click on the first time
I'm new to javascript, so I don't know how to change this.
Thank you
function showhidemenu()
var x = document.getElementById("menu");
if (x.style.display === "none")
x.style.display = "block";
else
x.style.display = "none";
#menu
background: rgba(0, 0, 0, 0);
position: absolute;
z-index: 1;
top: 60px;
right: 50px;
width: 150px;
font-family: 'Open Sans', sans-serif;
display: none;
<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>javascript html css button show-hide
asked Mar 8 at 22:09
Louis ChausséLouis Chaussé
73
add a comment |
I have this show/hide button on my website. It works, but on the first time the user needs to double-click it as if the switch is set to "hide" but the element is already hidden...
I'd like to edit my code so the button shows the element with a single click on the first time
I'm new to javascript, so I don't know how to change this.
Thank you
function showhidemenu()
var x = document.getElementById("menu");
if (x.style.display === "none")
x.style.display = "block";
else
x.style.display = "none";
#menu
background: rgba(0, 0, 0, 0);
position: absolute;
z-index: 1;
top: 60px;
right: 50px;
width: 150px;
font-family: 'Open Sans', sans-serif;
display: none;
<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>javascript html css button show-hide
asked Mar 8 at 22:09
Louis ChausséLouis Chaussé
73
I have this show/hide button on my website. It works, but on the first time the user needs to double-click it as if the switch is set to "hide" but the element is already hidden...
I'd like to edit my code so the button shows the element with a single click on the first time
I'm new to javascript, so I don't know how to change this.
Thank you
function showhidemenu()
var x = document.getElementById("menu");
if (x.style.display === "none")
x.style.display = "block";
else
x.style.display = "none";
#menu
background: rgba(0, 0, 0, 0);
position: absolute;
z-index: 1;
top: 60px;
right: 50px;
width: 150px;
font-family: 'Open Sans', sans-serif;
display: none;
<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>function showhidemenu()
var x = document.getElementById("menu");
if (x.style.display === "none")
x.style.display = "block";
else
x.style.display = "none";
#menu
background: rgba(0, 0, 0, 0);
position: absolute;
z-index: 1;
top: 60px;
right: 50px;
width: 150px;
font-family: 'Open Sans', sans-serif;
display: none;
<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>function showhidemenu()
var x = document.getElementById("menu");
if (x.style.display === "none")
x.style.display = "block";
else
x.style.display = "none";
#menu
background: rgba(0, 0, 0, 0);
position: absolute;
z-index: 1;
top: 60px;
right: 50px;
width: 150px;
font-family: 'Open Sans', sans-serif;
display: none;
<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>javascript html css button show-hide
javascript html css button show-hide
asked Mar 8 at 22:09
Louis ChausséLouis Chaussé
73
asked Mar 8 at 22:09
Louis ChausséLouis Chaussé
73
asked Mar 8 at 22:09
Louis ChausséLouis Chaussé
73
asked Mar 8 at 22:09
Louis ChausséLouis Chaussé
73
asked Mar 8 at 22:09
Louis ChausséLouis Chaussé
73
73
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
To achieve expected result, use below option of checking display initially which will be empty if it is not inline
x.style.display === "none" || x.style.display === ""
Please refer this link for more details - Why element.style always return empty while providing styles in CSS?
function showhidemenu()
var x = document.getElementById("menu");
if (x.style.display === "none" #menu
background: rgba(0, 0, 0, 0);
position: absolute;
z-index: 1;
top: 60px;
right: 50px;
width: 150px;
font-family: 'Open Sans', sans-serif;
display: none;
<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>answered Mar 8 at 22:18
Naga Sai ANaga Sai A
6,4111927
add a comment |
You need to check your "if/then" statement. You are checking the wrong order.
function showhidemenu()
var x = document.getElementById("menu");
if (x.style.display == "block")
x.style.display = "none";
else
x.style.display = "block";
#menu
background: rgba(0, 0, 0, 0);
position: absolute;
z-index: 1;
top: 60px;
right: 50px;
width: 150px;
font-family: 'Open Sans', sans-serif;
display: none;
<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>answered Mar 8 at 22:11
JhWebDevGuyJhWebDevGuy
7639
add a comment |
Because initially x.style.display === "none" is false and it goes to else block.
You can use ternary operator for this purpose.
function showhidemenu()
var x = document.getElementById("menu");
x.style.display = !x.style.display ? 'block' : '';
#menu
background: rgba(0, 0, 0, 0);
position: absolute;
z-index: 1;
top: 60px;
right: 50px;
width: 150px;
font-family: 'Open Sans', sans-serif;
display: none;
<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>The code works because '' is falsy value
answered Mar 8 at 22:11
Maheer AliMaheer Ali
11.6k1027
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55071684%2fwhy-my-show-hide-button-needs-double-click-on-first-time%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
To achieve expected result, use below option of checking display initially which will be empty if it is not inline
x.style.display === "none" || x.style.display === ""
Please refer this link for more details - Why element.style always return empty while providing styles in CSS?
function showhidemenu()
var x = document.getElementById("menu");
if (x.style.display === "none" #menu
background: rgba(0, 0, 0, 0);
position: absolute;
z-index: 1;
top: 60px;
right: 50px;
width: 150px;
font-family: 'Open Sans', sans-serif;
display: none;
<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>answered Mar 8 at 22:18
Naga Sai ANaga Sai A
6,4111927
add a comment |
To achieve expected result, use below option of checking display initially which will be empty if it is not inline
x.style.display === "none" || x.style.display === ""
Please refer this link for more details - Why element.style always return empty while providing styles in CSS?
function showhidemenu()
var x = document.getElementById("menu");
if (x.style.display === "none" #menu
background: rgba(0, 0, 0, 0);
position: absolute;
z-index: 1;
top: 60px;
right: 50px;
width: 150px;
font-family: 'Open Sans', sans-serif;
display: none;
<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>answered Mar 8 at 22:18
Naga Sai ANaga Sai A
6,4111927
add a comment |
To achieve expected result, use below option of checking display initially which will be empty if it is not inline
x.style.display === "none" || x.style.display === ""
Please refer this link for more details - Why element.style always return empty while providing styles in CSS?
function showhidemenu()
var x = document.getElementById("menu");
if (x.style.display === "none" #menu
background: rgba(0, 0, 0, 0);
position: absolute;
z-index: 1;
top: 60px;
right: 50px;
width: 150px;
font-family: 'Open Sans', sans-serif;
display: none;
<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>answered Mar 8 at 22:18
Naga Sai ANaga Sai A
6,4111927
To achieve expected result, use below option of checking display initially which will be empty if it is not inline
x.style.display === "none" || x.style.display === ""
Please refer this link for more details - Why element.style always return empty while providing styles in CSS?
function showhidemenu()
var x = document.getElementById("menu");
if (x.style.display === "none" #menu
background: rgba(0, 0, 0, 0);
position: absolute;
z-index: 1;
top: 60px;
right: 50px;
width: 150px;
font-family: 'Open Sans', sans-serif;
display: none;
<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>function showhidemenu()
var x = document.getElementById("menu");
if (x.style.display === "none" #menu
background: rgba(0, 0, 0, 0);
position: absolute;
z-index: 1;
top: 60px;
right: 50px;
width: 150px;
font-family: 'Open Sans', sans-serif;
display: none;
<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>function showhidemenu()
var x = document.getElementById("menu");
if (x.style.display === "none" #menu
background: rgba(0, 0, 0, 0);
position: absolute;
z-index: 1;
top: 60px;
right: 50px;
width: 150px;
font-family: 'Open Sans', sans-serif;
display: none;
<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>answered Mar 8 at 22:18
Naga Sai ANaga Sai A
6,4111927
answered Mar 8 at 22:18
Naga Sai ANaga Sai A
6,4111927
answered Mar 8 at 22:18
Naga Sai ANaga Sai A
6,4111927
answered Mar 8 at 22:18
Naga Sai ANaga Sai A
6,4111927
6,4111927
add a comment |
add a comment |
You need to check your "if/then" statement. You are checking the wrong order.
function showhidemenu()
var x = document.getElementById("menu");
if (x.style.display == "block")
x.style.display = "none";
else
x.style.display = "block";
#menu
background: rgba(0, 0, 0, 0);
position: absolute;
z-index: 1;
top: 60px;
right: 50px;
width: 150px;
font-family: 'Open Sans', sans-serif;
display: none;
<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>answered Mar 8 at 22:11
JhWebDevGuyJhWebDevGuy
7639
add a comment |
You need to check your "if/then" statement. You are checking the wrong order.
function showhidemenu()
var x = document.getElementById("menu");
if (x.style.display == "block")
x.style.display = "none";
else
x.style.display = "block";
#menu
background: rgba(0, 0, 0, 0);
position: absolute;
z-index: 1;
top: 60px;
right: 50px;
width: 150px;
font-family: 'Open Sans', sans-serif;
display: none;
<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>answered Mar 8 at 22:11
JhWebDevGuyJhWebDevGuy
7639
add a comment |
You need to check your "if/then" statement. You are checking the wrong order.
function showhidemenu()
var x = document.getElementById("menu");
if (x.style.display == "block")
x.style.display = "none";
else
x.style.display = "block";
#menu
background: rgba(0, 0, 0, 0);
position: absolute;
z-index: 1;
top: 60px;
right: 50px;
width: 150px;
font-family: 'Open Sans', sans-serif;
display: none;
<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>answered Mar 8 at 22:11
JhWebDevGuyJhWebDevGuy
7639
You need to check your "if/then" statement. You are checking the wrong order.
function showhidemenu()
var x = document.getElementById("menu");
if (x.style.display == "block")
x.style.display = "none";
else
x.style.display = "block";
#menu
background: rgba(0, 0, 0, 0);
position: absolute;
z-index: 1;
top: 60px;
right: 50px;
width: 150px;
font-family: 'Open Sans', sans-serif;
display: none;
<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>function showhidemenu()
var x = document.getElementById("menu");
if (x.style.display == "block")
x.style.display = "none";
else
x.style.display = "block";
#menu
background: rgba(0, 0, 0, 0);
position: absolute;
z-index: 1;
top: 60px;
right: 50px;
width: 150px;
font-family: 'Open Sans', sans-serif;
display: none;
<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>function showhidemenu()
var x = document.getElementById("menu");
if (x.style.display == "block")
x.style.display = "none";
else
x.style.display = "block";
#menu
background: rgba(0, 0, 0, 0);
position: absolute;
z-index: 1;
top: 60px;
right: 50px;
width: 150px;
font-family: 'Open Sans', sans-serif;
display: none;
<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>answered Mar 8 at 22:11
JhWebDevGuyJhWebDevGuy
7639
answered Mar 8 at 22:11
JhWebDevGuyJhWebDevGuy
7639
answered Mar 8 at 22:11
JhWebDevGuyJhWebDevGuy
7639
answered Mar 8 at 22:11
JhWebDevGuyJhWebDevGuy
7639
7639
add a comment |
add a comment |
Because initially x.style.display === "none" is false and it goes to else block.
You can use ternary operator for this purpose.
function showhidemenu()
var x = document.getElementById("menu");
x.style.display = !x.style.display ? 'block' : '';
#menu
background: rgba(0, 0, 0, 0);
position: absolute;
z-index: 1;
top: 60px;
right: 50px;
width: 150px;
font-family: 'Open Sans', sans-serif;
display: none;
<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>The code works because '' is falsy value
answered Mar 8 at 22:11
Maheer AliMaheer Ali
11.6k1027
add a comment |
Because initially x.style.display === "none" is false and it goes to else block.
You can use ternary operator for this purpose.
function showhidemenu()
var x = document.getElementById("menu");
x.style.display = !x.style.display ? 'block' : '';
#menu
background: rgba(0, 0, 0, 0);
position: absolute;
z-index: 1;
top: 60px;
right: 50px;
width: 150px;
font-family: 'Open Sans', sans-serif;
display: none;
<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>The code works because '' is falsy value
answered Mar 8 at 22:11
Maheer AliMaheer Ali
11.6k1027
add a comment |
Because initially x.style.display === "none" is false and it goes to else block.
You can use ternary operator for this purpose.
function showhidemenu()
var x = document.getElementById("menu");
x.style.display = !x.style.display ? 'block' : '';
#menu
background: rgba(0, 0, 0, 0);
position: absolute;
z-index: 1;
top: 60px;
right: 50px;
width: 150px;
font-family: 'Open Sans', sans-serif;
display: none;
<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>The code works because '' is falsy value
answered Mar 8 at 22:11
Maheer AliMaheer Ali
11.6k1027
Because initially x.style.display === "none" is false and it goes to else block.
You can use ternary operator for this purpose.
function showhidemenu()
var x = document.getElementById("menu");
x.style.display = !x.style.display ? 'block' : '';
#menu
background: rgba(0, 0, 0, 0);
position: absolute;
z-index: 1;
top: 60px;
right: 50px;
width: 150px;
font-family: 'Open Sans', sans-serif;
display: none;
<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>The code works because '' is falsy value
function showhidemenu()
var x = document.getElementById("menu");
x.style.display = !x.style.display ? 'block' : '';
#menu
background: rgba(0, 0, 0, 0);
position: absolute;
z-index: 1;
top: 60px;
right: 50px;
width: 150px;
font-family: 'Open Sans', sans-serif;
display: none;
<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>function showhidemenu()
var x = document.getElementById("menu");
x.style.display = !x.style.display ? 'block' : '';
#menu
background: rgba(0, 0, 0, 0);
position: absolute;
z-index: 1;
top: 60px;
right: 50px;
width: 150px;
font-family: 'Open Sans', sans-serif;
display: none;
<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>answered Mar 8 at 22:11
Maheer AliMaheer Ali
11.6k1027
edited Mar 8 at 22:34
answered Mar 8 at 22:11
Maheer AliMaheer Ali
11.6k1027
answered Mar 8 at 22:11
Maheer AliMaheer Ali
11.6k1027
answered Mar 8 at 22:11
Maheer AliMaheer Ali
11.6k1027
11.6k1027
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55071684%2fwhy-my-show-hide-button-needs-double-click-on-first-time%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
