Apply Style When Select - javascript

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;"

Related

JS one-click Toggle (not two clicks) - default value of toggled element

Why here we need to click two times (http://jsfiddle.net/xL8hyoye/4/):
html:
Click here to toggle visibility of element #foo
<div id="foo">This is foo</div>
css: #foo {display: none;}
js:
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
When here only by one click text disappears (http://jsfiddle.net/xL8hyoye/5/):
html:
Click here to toggle visibility of element #foo
<div id="foo" style='display:none'>This is foo</div> <!-- add display style here -->
css: <!-- delete ccs here -->
js:
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
Check if the style.display property is empty
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block' || e.style.display == '')
e.style.display = 'none';
else
e.style.display = 'block';
}
Click here to toggle visibility of element #foo
<div id="foo">This is foo</div>
Because .style is looking at the direct inline style of the element other than it's CSS style sheet. So for example, it will work if it looked like so:
<div id="foo" style="display: none;">This is foo</div>
Here is an example. Otherwise the .style isn't defined when placed in the CSS. In the second example the first click defines e.style.display, then it works normally afterwards. That is why it takes two clicks.
Another way to fix it is add an else since e.style.display to change it to what you want, assuming the element is hidden at the start:
if(e.style.display == 'block')
e.style.display = 'none';
else if( e.style.display == 'none' )
e.style.display = 'block';
else
e.style.display = 'block';
In the getElementById() documentation they state :
Document.getElementById()
Returns a reference to the element by its ID.
See it here :
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
So your javascript code is only assessing HTML Without CSS on the first iteration in particular.
I guess that's why first it goes to else and on the second click it gives e.style.display the value block ; because e.style.display has none as a value then.
Try using a different method than getElementById() if ever.
Hope it helps !
This can be solved changing the order in your if-else statement, like:
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
DEMO
Note: Your initial code don't work because the initial value of e.style.display is "" instead none :)

It closes DIV on second click, why?

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.

Trying to make a timed text come out

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

external links not working html/javascript

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

Switch visibility between two divs

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>

Categories

Resources