We Keep Coding

Toggle Menus using buttons in JS - But it shows both menus

i want to toggle two menus offered by two buttons.the issue is when i click on button one, it shows the menu bound with button one but when i click the other, it shows both instead of hiding the first one and vice versa, on my login page. The menus are identified by the ids of; 'reqpwd' and 'signup' in html / JS. What is worng? also suggest improvement in code if possible. My JS code:
<script>
window.onload = function() {
document.getElementById('reqpwd').style.display = 'none';
document.getElementById('signup').style.display = 'none';
};
function chk(elm) {
var signup_ = signup.id;
var reqpwd_ = reqpwd.id;
elm_ = elm.id;
if (elm_ == reqpwd_){
hide(signup_);
show(reqpwd_);
}
if (elm_== signup_){
hide(reqpwd_);
show(signup_);
}
};
function show(abc) {
var menuBox = document.getElementById(abc);
if(menuBox.style.display == "none") { // if is menuBox displayed, hide it
menuBox.style.display = "block";
} };
function hide(abc){ // if is menuBox hidden, display it
var menuBox = document.getElementById(abc);
if(menuBox.style.display == "block"){
menuBox.style.display == "none";
}
};
</script>

Instead of menuBox.style.display == "none"; try using menuBox.style.visibility== "hidden";
Edit:
I have changed a few things in your code. Didn't make a whole lot of sense to me the way you're setting the styles on load (missing HTML), so I had to use IDs that made sense to me.
Edit:
Ok, my bad. I updated the code. I think the problem is on hide you're using double equals instead of single equals on menuBox.style.display == "none";. Thus the menu is never hiding.
https://codepen.io/juanferrer/pen/qmOmWa

Finally i have landed into something like this using the flag variable as a state indicator.. now the only requirement is to check toggle as well as disappear the relevant menu by the same button..i.e. if signup menu is already open, the signup or reset button should close it and vice versa.
window.onload = function() {
document.getElementById('regd').style.visibility = 'hidden'; //regisration msg
document.getElementById('rset').style.visibility = 'hidden'; //reset msg
document.getElementById('reqpwd').style.display = 'none';
document.getElementById('signup').style.display = 'none';
};
var flag = 0;
function chk(elm) {
var signup_ = signup.id;
var reqpwd_ = reqpwd.id;
elm_ = elm.id;
if (elm_ == reqpwd_ && flag === 0 || elm_ == reqpwd_ && flag == 2) {
flag = 1;
hide(signup_);
show(reqpwd_);
}
if (elm_ == signup_ && flag === 0 || elm_ == signup_ && flag == 1) {
flag = 2;
show(signup_);
hide(reqpwd_);
}
if (elm_ == reqpwd_ && flag == 1 || elm_ == signup_ && flag == 2) {
hide(elm_);
flag = 0;
}
};
function show(abc) {
var menuBox = document.getElementById(abc);
if (menuBox.style.display === "none") { // if is menuBox hidden, display it
menuBox.style.display = "block";
}
};
function hide(abc) { // if is menuBox
var menuBox = document.getElementById(abc);
if (menuBox.style.display === "block") { //if displayed, hide it
menuBox.style.display = "none";
}
};

Toggle visibility (from 2 DIVs; if 1 DIV is visible, the other shouldn't be and vice versa)

I have a toggle menu. 2 hyperlinks for 2 divs.
I found below code from web. It works as intended. Since I want only 1 of my div to be visible, I tried to edit the code. I don't know Javascript. I tried to write it similar to PHP.
For the time being code doesn't work. (It does nothing onclick)
original code
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else e.style.display = 'none';}
</script>
edited, nonworking code
In default, both DIVs are hidden.
I require 'only 1 to be visible simultaneously.'
NOTE: the 2 ID info for the 2 divs are:
search
menu
I know the code below won't be sufficient even it was OK but can you tell me where am I wrong for the time being?
<script type="text/javascript">
function toggle_visibility(id)
{
var e = document.getElementById(id);
if (e == 'menu' && e.style.display == 'none')
{
e.style.display = 'block';
document.getElementById('search').style.display = 'none';
}
else if (e == 'search' && e.style.display == 'none')
{
e.style.display = 'block';
document.getElementById('menu').style.display = 'none';
}
}
</script>

Seems like you mean id, not e on lines 4 and 10
function toggle_visibility(id)
{
var e = document.getElementById(id);
if (id == 'menu' && e.style.display == 'none')
^^
{
e.style.display = 'block';
document.getElementById('search').style.display = 'none';
}
else if (id == 'search' && e.style.display == 'none')
^^
{
e.style.display = 'block';
document.getElementById('menu').style.display = 'none';
}
}

Toggle visibility of two divs at once

I am using the following code to toggle visibility of a div area:
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
To toggle it, I am using:
onclick="toggle_visibility('id_of_element_to_toggle');"
How can I toggle the visibility of 2 divs at once? I want to make them switch. The simpler the method the better.
MORE INFO:
I am not having an luck. Here is my code:
Change Payment Method
<script type="text/javascript">
function toggle_visibility(id, callgraph) {
var e = document.getElementById(id);
var e2 = document.getElementById(callgraph);
if(e.style.display == 'block')
e.style.display = 'none';
e2.style.display = 'block';
else
e.style.display = 'block';
e2.style.display = 'none';
}
</script>

The crudest solution would be to run it twice .. (once for each id)
onclick="toggle_visibility('first-id');toggle_visibility('second-id')"
Another would be to pass an array of id values
<script type="text/javascript">
function toggle_visibility(ids) {
for(i=0,len = ids.length; i < len; i++) {
var e = document.getElementById(ids[i]);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
}
</script>
And call it like this
onclick="toggle_visibility(['first-id','second-id']);"

can't you use same function but add the other id ?
<script type="text/javascript">
function toggle_visibility(id1,id2) {
var e = document.getElementById(id1);
var f = document.getElementById(id2);
if(e.style.display == 'block'&& f.style.display == 'block')
{
e.style.display = 'none';
f.style.display = 'none';
}
else
{
e.style.display = 'block';
f.style.display = 'block';
}
}
</script>
then
onclick="toggle_visibility('id_of_element_to_toggle1','id2');"

By "make them switch" do you mean that hiding one always shows the other?
For starters, you'd need a reference to both elements when you call the function:
onclick="toggle_visibility('id_of_element_to_toggle', 'id_of_other_element');"
Then in your function it's just a matter of setting both of them:
function toggle_visibility(id1, id2) {
var e1 = document.getElementById(id1);
var e2 = document.getElementById(id2);
if(e1.style.display == 'block')
e1.style.display = 'none';
e2.style.display = 'block';
else
e1.style.display = 'block';
e2.style.display = 'none';
}
It's not terribly elegant, but should get the job done clearly and effectively. (With a potential added benefit that if by some other means the two elements get "out of sync" then this would re-sync them. Or a potential added bug of the same functionality, depending on how you look at it I suppose.)

Not sure if this is exactly what you want, but I would suggest to you simply add an argument to your function to include another DIV element, i.e.:
<script type="text/javascript">
function toggle_visibility(id1, id2) {
var e1 = document.getElementById(id1);
var e2 = document.getElementById(id2);
if(e1.style.display == 'block')
e1.style.display = 'none';
e2.style.display = 'none';
else
e1.style.display = 'block';
e2.style.display = 'block';
}
</script>
Hope it helps

Javascript onclick link text change

I'm working on a new page and for the mobile version I'm going to make a navigation toggle in order to hide and to show the navigation.
HTML code :
<div id="toogleNavigation">
<a onclick="toggle_visibility('nav_header','nav_header_level2');">Navigation Einblenden</a>
</div>
Javascript code :
function toggle_visibility(id, id2) {
var e = document.getElementById(id);
var f = document.getElementById(id2);
if(e.style.display == 'block' ||
e.style.display == 'block' &&
f.style.display == 'block') {
e.style.display = 'none';
f.style.display = 'none';
document.getElementById('toogleNavigation').innerHTML = "Navigation 1einblenden";
} else {
e.style.display = 'block';
f.style.display = 'block';
document.getElementById('toogleNavigation').innerHTML = "Navigation 2ausblenden";
}
}
I've tried with :
document.getElementById('toogleNavigation').innerHTML = "Navigation 2ausblenden";
to change the text in text "Navigation Einblenden" when pressing on the link, but this doesn't work... Does somebody has an idea?

Moved the id from div to the a.
See it working in jsbin http://jsbin.com/eqeheb/5/watch
<div> <a id="toogleNavigation" onclick="toggle_visibility('nav_header','nav_header_level2');">Navigation Einblenden</a> </div>

Make change like this....
HTML code
<div id="toogleNavigation">
<a id="divInner" onclick="toggle_visibility('nav_header','nav_header_level2');">
Navigation Einblenden
</a>
</div>
And
JavaScript Code
function toggle_visibility(id, id2) {
var e = document.getElementById(id);
var f = document.getElementById(id2);
if(e.style.display == 'block' ||
( e.style.display == 'block' &&
f.style.display == 'block' ) ) {
e.style.display = 'none';
f.style.display = 'none';
document.getElementById('divInner').innerHTML = "Navigation 1einblenden";
}
else {
e.style.display = 'block';
f.style.display = 'block';
document.getElementById('divInner').innerHTML = "Navigation 2ausblenden";
}
}
This will work for you as its working fo

window.onchange = function() event

I have created a function that shows/hides different messages according to a combination of select dropdowns that works fine in chrome and FF using the window.onchange event. Can anyone tell me why this doesn't work in ie and if they have a solution please.
It had to be built in tables due to internal restriction.
;(function(){
document.onchange = function(){
// Initialise variables for drop down options
var homeMove = document.getElementById('homeMove'),
transferOrder = document.getElementById('transferOrder'),
orderComplete = document.getElementById('orderComplete'),
submitBtn = document.getElementById('submitBtn');
// Initialise variables for comments
var comment1 = document.getElementById('comment1'),
comment2 = document.getElementById('comment2'),
comment3 = document.getElementById('comment3');
if((homeMove.value == 'No') && (transferOrder.value == 'No')){
comment2.style.display = 'none';
comment3.style.display = 'none';
comment1.style.display = 'block';
submitBtn.disabled = true;
}
// if Home Move - No AND Transfer Order - Yes. Display nothing. Submit button abled
if((homeMove.value == 'No') && (transferOrder.value == 'Yes')){
comment1.style.display = 'none';
comment2.style.display = 'none';
comment3.style.display = 'none';
submitBtn.disabled = false;
}
// If Home Move - Yes AND Transfer Order - NO. Display comment1. Submit button disables
if((homeMove.value == 'Yes') && (transferOrder.value == 'No')){
comment1.style.display = 'block';
comment2.style.display = 'none';
comment3.style.display = 'none';
submitBtn.disabled = true;
}
// If Home Move - Yes AND Transfer Order - Yes AND Order Complete - Yes. Display comment2 Subhmit button abled
if((homeMove.value == 'Yes') && (transferOrder.value == 'Yes') && (orderComplete.value == 'Yes')){
comment1.style.display = 'none';
comment2.style.display = 'block';
comment3.style.display = 'none';
submitBtn.disabled = false;
}
// If Home Move - Yes AND Transfer Order - Yes and Order Complete - No. Display comment3. Submit button disabled
if((homeMove.value == 'Yes') && (transferOrder.value == 'Yes') && (orderComplete.value == 'No')){
comment1.style.display = 'none';
comment2.style.display = 'none';
comment3.style.display = 'block';
submitBtn.disabled = true;
}
}
})();
Any help with this would be great. Thanks

First, it would be better if instead of doing a document.change, add events to change of drop downs.
Sometimes onpropertychange is a more sure shot event to rely on for ie. but make sure for that event, you do a subsequent check that the event is for a change in value by adding the following filter:
yourselectboxelement.onpropertychange = function() {
if (window.event.propertyName == "value") {
// Do stuff here
}
};

IE only fires the onchange event when the element loses focus
Try to use onclick event.