this is my first question here, so please be not too harsh ;)
I want to pop up a new listelement with javascript an also change the color of the link. How can i do that?
I tried this:
<script type="text/javascript">
function toggle(control, control2){
var elem = document.getElementById(control);
if(elem.style.display == "none"){
elem.style.display = "block";
}else{
elem.style.display = "none";
}
var elem = document.getElementById(control2);
if(elem.style.display == "rgb(0,10,50)"){
elem.style.display = "rgb(50,10,60)";
}else{
elem.style.display = "rgb(0,10,50)";
}
}
</script>
<li id="lifi" class="leistungen"> x Zum aufklappen hier klicken.
<ul id="first" style="display:none">
If I just do the first part, it works just fine. But with both parameters I cant get it to work.
Thanks a lot.
You need to set the second parameter, 'control2' to a different name than the first one, you cant use 'elem' for both:
<script type="text/javascript">
function toggle(control, control2){
var elem = document.getElementById(control);
if(elem.style.display == "none"){
elem.style.display = "block";
}else{
elem.style.display = "none";
}
var elem2 = document.getElementById(control2);
if(elem2.style.display == "rgb(0,10,50)"){
elem2.style.display = "rgb(50,10,60)";
}else{
elem2.style.display = "rgb(0,10,50)";
}
}
</script>
and welcome to stack overflow!
Related
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.
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 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>
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;"
I have this script on dynamic radio buttons... On load the divs display, great. One is automatically checked, great. If I click the other radio button the divs hide, great. When I click back to the main radio button to show the divs again the divs don't reappear.
How do I get the divs to reappear (show)?????
function hide() {
var ele = document.getElementById("hideRow");
var coup = document.getElementById("coup");
if ("hideRow") {
ele.style.display = "none";
coup.style.display = "none";
} else {
ele.style.display = "block";
coup.style.display = "block";
}
}
Try :
function hide() {
var ele = document.getElementById("hideRow");
var coup = document.getElementById("coup");
if (ele.style.display == "block") {
ele.style.display = "none";
coup.style.display = "none";
} else {
ele.style.display = "block";
coup.style.display = "block";
}
}
This is always true:
if ("hideRow") {
// Always executes
}
So, you only ever get to the if-block. You need to change the conditional on your if-statement.
if (ele.style.visibility == 'visible';) {
ele.style.visibility = 'hidden';
coup.style.visibility = 'hidden';
} else {
ele.style.visibility = 'visible';
coup.style.visibility = 'visible';
}
I may have entirely missed the mark and not understood what your trying to do, but that's the way I'd do it (I think - you may be trying to do something else).