I want to switch/toggle visibility between div id1 and div id2. I want div id2 to display by default when the page loads and when I click on a link I want div id1 to replace div id2. I have tried a few different methods, even played around with it on jsfiddle a bit but I can't figure out what I am missing here.
HTML:
Change Payment Method
<div id="id1" style="display: none"><p>test 1</p></div>
<div id="id2"><p>test 2</p></div>
JavaScript:
function toggle_visibility(id1, id2) {
var e = document.getElementById(id1);
var e2 = document.getElementById(id2);
if(e.style.display == 'block') {
e.style.display = 'block';
e2.style.display = 'none';
}
else {
e.style.display = 'none';
e2.style.display = 'block';
}
}
Look at the function signature:
function toggle_visibility(id1, id2)
^^^^^^^^
Look how you are calling it:
onclick="toggle_visibility('id'); toggle_visibility('id2');"
^^^^ ^^^^^
Do they match? No. You want one call with two arguments
onclick="toggle_visibility('id1', 'id2');"
The other issue is your function is wrong, see Fibbe's solution for that
You need to use brackets in order to have multiple lines affected by the if-statement:
function toggle_visibility(id1, id2) {
var e = document.getElementById(id1);
var e2 = document.getElementById(id2);
if(e.style.display == 'block') {
e.style.display = 'block';
e2.style.display = 'none';
}
else {
e.style.display = 'none';
e2.style.display = 'block';
}
}
You seem to have wrongly written the statements qithin "if" and "else" in javascript function. The correct way is-
function toggle_visibility(id1, id2) {
var e = document.getElementById(id1);
var e2 = document.getElementById(id2);
if(e.style.display == 'block') {
e.style.display = 'block';
e2.style.display = 'none';
}
else {
e.style.display = 'none';
e2.style.display = 'block';
}
}
Also, you have passed the arguments in wrong way, the correct way is-
Change Payment Method
<div id="id1" style="display: none"><p>test 1</p></div>
<div id="id2"><p>test 2</p></div>
This code might be helpful:
<div id="mydivon" style="display:block">This is on.</div>
<div id="mydivoff" style="display:none">This is off.</div>
Toggle Div Visibility
<script language="javascript">
function toggleDiv(divid)
{
varon = divid + 'on';
varoff = divid + 'off';
if(document.getElementById(varon).style.display == 'block')
{
document.getElementById(varon).style.display = 'none';
document.getElementById(varoff).style.display = 'block';
}
else
{
document.getElementById(varoff).style.display = 'none';
document.getElementById(varon).style.display = 'block'
}
}
</script>
If u can use Jquery:
Html
<a id="button" >Click</a>
<div class="div show">1</div>
<div class="div">2</div>
Javascript
$('#button').click(function() {
$('.div').toggleClass('show');
});
Css
.div {display:none;}
.show {display:block;}
Change Payment Method
<div id="id1" style="display: none"><p>test 1</p></div>
<div id="id2"><p>test 2</p></div>
Related
function nes(){
if (document.getElementById('nes').style.display == 'block'){
document.getElementById('nes').style.display = 'none';
}
else if (document.getElementById('snes').style.display == 'block') {
document.getElementById('snes').style.display = 'none';
}
else if (document.getElementById('gba').style.display == 'block') {
document.getElementById('gba').style.display = 'none';
}
else if (document.getElementById('sega').style.display == 'block') {
document.getElementById('sega').style.display = 'none';
}
else if (document.getElementById('flash').style.display == 'block') {
document.getElementById('flash').style.display = 'none';
}
else if (document.getElementById('n64').style.display == 'block') {
document.getElementById('n64').style.display = 'none';
}
else if (document.getElementById('all').style.display == 'block') {
document.getElementById('all').style.display = 'none';
}
document.getElementById('snes').style.display = 'block';
}
<input id=nesdot type="image" src="C:\Users\Me\Documents\Website\Assets\Home Page\selection dot.png", onclick='nes()'/>
<div id=nes>
<input type="image" src="C:\Users\Sam Scolari\Documents\Totally Not An Arcade\Assets\Home Page\Adjusted Logos\NES.png"/>
</div>
<div id=all>
<input type="image" src="C:\Users\Sam Scolari\Documents\Totally Not An Arcade\Assets\Home Page\Adjusted Logos\A2Z.png"/>
</div>
I am trying to replace a picture that is in a div tag with javascript. When I click the button it seems to skip over all of the if and else statements and goes right to the single command at the end of the function. Is there something wrong with the syntax of the statements? It outputs to my website by adding the next image directly under the one that was supposed to be replaced. Any ideas? Thanks.
You might try this code:
function nes(){
var elem = document.getElementById('nes');
var displayStyleNes = null;
if (elem.style.display) {
displayStyleNes = elem.style.display;
} else if (elem.currentStyle) {
displayStyleNes = elem.currentStyle.display;
} else if (window.getComputedStyle) {
displayStyleNes = window.getComputedStyle(elem, null).getPropertyValue("display");
if (displayStyleNes === 'block'){
document.getElementById('nes').style.display = 'none';
}
//.....
}
Your IDs in HTML need quotes to be effective. The inspector won't prompt you any errors but the IDs will not be affected.
<input id="snes"/>
I assume that your function is wrapped in a script normally? If not, that is another problem!
Hope this helps :)
I have a javascript function which should close the div on click. However, it works on the second click. How can I avoid that ?
JavaScript
function showhide(id) {
var e = document.getElementById(id);
if(e.style.display == 'block') {
e.style.display = 'none';
} else {
e.style.display = 'block';
}
}
HTML
<div id="foota123">
Content
<div onclick="showhide('foota123')" class="iks">X</div>
</div>
e.style refers to the style attribute of the div (style="..."). First time through, there is no style attribute on the div. The condition is false and the code sets a style attribute of:
<div style="display: block">
The second time through, the if condition is true, and the style of the block is set to "none". So it disappears.
Your code does not handles the computed style on the element, hence on first click the element is still in display:block.
Try this with jQuery:
function showhide(id) {
$('#'+id).toggle();
}
$.toggle() will show the element if it is hidden else hide.
The style property is empty by default; for example:
var e = document.createElement('div');
e.style.display; // ""
Simply reversing the condition should fix that:
function showhide(id) {
var e = document.getElementById(id);
e.style.display = e.style.display == 'none' ? 'block' : 'none';
}
Try this, if you want straight javascript, the jQuery answer is better though :)
function showhide(id) {
var e = document.getElementById(id);
if( e.style.display!=='none' ) e.style.display = 'none';
else e.style.display = 'block';
}
<div id="foota123">
Content
<div onclick="showhide('foota123')" class="iks">click me</div>
</div>
It works for me.
Html code
<div id="foota123">
Content
</div>
<div onclick="showhide('foota123')" class="iks">X</div>
Script
<script type="text/javascript">
function showhide(id) {
var e = document.getElementById(id);
if(e.style.display == 'block'){
e.style.display = 'none';
}
else{
e.style.display = 'block';
}
}
</script>
OR style="block" is also a better option.
So I am trying to use javascript to make a timed text appear.
The following code Im using is this
<body>
<script type="text/javascript">
(function toggle_visibility(id) {
setTimeout (var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
,1000);
</script>
<a onclick="test('foo');"><b><u>Click to view</b></u></a><div id="foo" style=display:none;>TEXT</div>
This script is not working, but how can I make it work?
Problems:
function name is toggle_visibility not test
There are syntax error in your function
Even HTML has problems
JavaScript
function toggle_visibility(id) {
setTimeout(function () {
var element = document.getElementById(id);
if (element.style.display == 'none') {
element.style.display = 'block';
} else {
element.style.display = 'none'
};
}, 1000);
};
HTML
<a onclick="toggle_visibility('foo');" href="#"><b><u>Click to view</u></b></a>
<div id="foo" style=display:none;>TEXT</div>
Demo
I have created a click to show option on one of my client's website. Which is working perfectly there.
Its respective code is given below.
<style>
a{padding:0;margin:0;color:#009cbb;font-weight:bold;text-decoration:none;}
</style>
<p>
<div>Welcome</div>
<div id="welcome" style="display:none;">This is test</div>
<div>Focus</div>
<div id="focus" style="display:none;">This is test2
</div>
<div>Cataracts</div>
<div id="cataracts" style="display:none;">This is test2
</div>
</p>
<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>
When i link test1 from an external page Its should display test1 and keep close the other 2 but the problem is when I click on the link it shows all of them as closed.
The linking code is
Read More >
Kindly help me when someone click on Read more it displays the welcome message as open and others as closed.
Thanks
Try this - tested in IE8, Chrome32 and Fx 24 on windows
Live Demo
Live Demo With Hash
function toggle_visibility(link) {
var id = link.hash.substring(1);
var obj = document.getElementById(id);
if (obj) obj.style.display = obj.style.display == "block"?"none":"block";
return false;
}
window.onload=function() {
var id = location.hash?location.hash.substring(1):"";
if (id) document.getElementById(id).style.display="block";
}
using this format on each link (which should also be refactored to be unobtrusive)
onclick="return toggle_visibility(this);"
Please note the (this)
HA I finally figured out what you want!
So you want the element to be opened on page load if the link ends with #element_id.
Your script tag currently:
<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>
Change it to:
<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';
}
var parts = window.location.split('#'),
hash = '';
if (parts.length > 1) {
hash = parts[1];
}
if (hash !== '') {
toggle_visibility(hash);
}
</script>
EDIT:
window.location.hash is apparently supported everywhere. You might want to use that instead of string.split()
Though I did not clearly understand your problem, I have modified your function based on my assumptions.
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'block' || e.style.visibility == 'visible') {
e.style.display = 'none';
e.style.visibility = "hidden";
} else {
e.style.display = 'block';
e.style.visibility = 'visible';
}
}
Please let us know what are the modifications you find needed.
FIDDLE
window.onload = function(){
toggle_visibility(window.location.hash.substring(1));
}
I have a small script consisting of the code:
<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>
And some HTML:
Test Me
<br/>
<div id="test" style="display:none;">
Hello there
</div>
The code makes it so that when the Test Me link is clicked the becomes visible, I am curious about how to make it so that when clicked the Test Me link the text colour would change?
Well.
First the onclick attr is wrong, you see. The function is calling toggle_..., then it makes the rest.
The js-script
function toggle_visibility(id,$this) {
var e = document.getElementById(id);
if(e.style.display == 'block')
{
$this.style.color = '';
e.style.display = 'none';
}
else
{
$this.style.color = 'gold';
e.style.display = 'block';
}
}
and the html-code
Test Me<br/>
<div id="test" style="display:none;">
Hello there
Edit, I also added $this to also now the element that was clicked.
onclick="javascript: jQuery('#test').css('color', 'red'); return false;"