Toggle visibility of two divs at once - javascript

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

Related

how do I toggle table properly

I'm trying to modify webpage such as
not show table at first
after finishing certain event show table
so I made a variable for toggling a table. However problem is that it becomes hidden when the page is reloaded.
// when page is ready
var toggle = false;
if (toggle == true) { show table }
else { hide table }
/// during finish action -> toggle = true;
code here
https://jsfiddle.net/r4jd0wo7/
// after this event, show table
$(document).on("click","#searchgroupsubmit",function() {
$('#checkgroup').val($('.list-group-item.group.active').find("input[name='groupdeletecheck']").val());
jQuery("#searchList").submit();
});
// I made a function for toogle table
function toggle_visibility() {
var e = document.getElementById("table1");
var f = document.getElementById("pagenation1");
if (e.style.display == 'block' || e.style.display == '')
e.style.display = 'none';
else
e.style.display = 'block';
if (f.style.display == 'block' || f.style.display == '')
f.style.display = 'none';
else
f.style.display = 'block';
}

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';
}
}

onClick - Hide/Display Div

In this i want a function that when the user click on "Button 01" it should make visible the DIVid "01". After this when click on some other button, it should it hide the previous DIVid and make visible the relevant DIVid.
I have created a fiddle.
function Visibility() {
var har_element = document.getElementById('C');
var meth_element = document.getElementById('D');
var main_element = document.getElementById('E');
var vis = har_element.style;
if(vis.display == 'block') {vis.display = 'block';
meth_element.style.display='block';
main_element.style.display='block';
} else {
vis.display = 'block';
meth_element.style.display='block';
main_element.style.display='block';
}
}
try this
window.onload = function(){
hideSomeDivs();
}
function showHide(showHidebuttonId)
{
hideAll();
if(showHidebuttonId == "1")
document.getElementById("first").style.display = 'block';
else if(showHidebuttonId == "2")
document.getElementById("second").style.display = 'block';
else if(showHidebuttonId == "3")
document.getElementById("third").style.display = 'block';
else if(showHidebuttonId == "4")
document.getElementById("fourth").style.display = 'block';
else if(showHidebuttonId == "5")
document.getElementById("fifth").style.display = 'block';
}
function hideAll(){
document.getElementById("first").style.display = 'none';
document.getElementById("second").style.display = 'none';
document.getElementById("third").style.display = 'none';
document.getElementById("fourth").style.display = 'none';
document.getElementById("fifth").style.display = 'none';
}
function hideSomeDivs()
{
document.getElementById("second").style.display = 'none';
document.getElementById("third").style.display = 'none';
}

Combine two js functions to show/hide toggle

I'm currently using two functions to show and hide elements on a project I'm working on.
One function is for when the element is currently .display = 'block' and the other is for when the element is currently .display = 'none'.
function hide1(id) {
ele = document.getElementById(id);
if (ele.style.display == 'block')
ele.style.display = 'none';
else
ele.style.display = 'block'; }
function hide2(id) {
ele = document.getElementById(id);
if (ele.style.display == 'none')
ele.style.display = 'block';
else
ele.style.display = 'none'; }
I'm all for optimization and am wondering if there is a way to combine both functions into one, or if its fine to keep them as they are.
Cheers,
function hide(id) {
ele = document.getElementById(id);
ele.style.display = (ele.style.display == 'block')?'none':'block';
}
function ChangeDisplay(id,prevDisplay,newDisplay) {
ele = document.getElementById(id);
if (ele.style.display == prevDisplay)
ele.style.display = newDisplay;
else
ele.style.display == prevDisplay;
}
That should do your work

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

Categories