DarkxPunk Posted June 27, 2012 Share Posted June 27, 2012 So here is my JS: function hideShow(a) {a.innerHTML = a.innerHTML == "Row" ? "Row" : "Row";var show_hide_ref= a.parentNode.id.replace("row", "info");var show_hide = document.getElementById(show_hide_ref)show_hide.style.height == "100px" ? show_hide.style.height="1px" : show_hide.style.height="100px";show_hide.style.backgroundColor == "#ffffff" ? show_hide.style.backgroundColor="" : show_hide.style.backgroundColor="#ffffff";} As you can see its a simple toggle, but for some reason it ignores the blank "" and keeps it white. Any ideas on how to just remove it? Thanks! Link to comment Share on other sites More sharing options...
Ingolme Posted June 27, 2012 Share Posted June 27, 2012 It may be because the browser is returning the background color in rgb() format: rgb(255, 255, 255) You could simplify your expression to this: show_hide.style.backgroundColor = (show_hide.style.backgroundColor == "#ffffff" ? "" : "#ffffff"); Link to comment Share on other sites More sharing options...
DarkxPunk Posted June 27, 2012 Author Share Posted June 27, 2012 Thanks for the simplified version. Yes it was exactly that. The browser was returning it as rgb which once I replaced it fixed it. Now will this work in all browsers you think? Here is the new JS: function hideShow(a) {var show_hide_ref = a.parentNode.id.replace("row", "info");var show_hide = document.getElementById(show_hide_ref);show_hide.style.height = (show_hide.style.height == "20px" ? "1px" : "20px");show_hide.style.backgroundColor = (show_hide.style.backgroundColor == "rgb(255, 255, 255)" ? "" : "rgb(255, 255, 255)");} Link to comment Share on other sites More sharing options...
Ingolme Posted June 27, 2012 Share Posted June 27, 2012 I'm not sure. Some browsers might return RGB while others return it exactly the same way as it was given. You could check for both #ffffff and rgb().Some people toggle the classname of an element rather than change the style. Link to comment Share on other sites More sharing options...
DarkxPunk Posted June 27, 2012 Author Share Posted June 27, 2012 Toggling the class name is a interesting idea. Currently I just told it to use RGB so I think it will be alright. If I run into compatibility problems I will take my shot at the class toggling (JS is so confusing at times if you don't understand all the logic behind it) Thanks again Ingolme! Link to comment Share on other sites More sharing options...
dsonesuk Posted June 27, 2012 Share Posted June 27, 2012 All you have to do is use a variable to store and check the bg color value, if rgb convert to hex, and check this variable value <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>LED</title> <link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" charset="utf-8"> <script type="text/javascript">/*<![CDATA[*//*---->*/function hideShow(a,e) {e.preventDefault();a.innerHTML = a.innerHTML == 'Show Info' ? 'Hide Info' : 'Show Info';var show_hide_ref= a.parentNode.id.replace("row", "info");var show_hide = document.getElementById(show_hide_ref)//show_hide.style.display = (show_hide.style.display == 'block' ? 'none' : 'block');var currentBG = show_hide.style.backgroundColor.toLowerCase();if(currentBG == "rgb(255, 255, 255)") { currentBG = "#ffffff"; }show_hide.style.backgroundColor = currentBG == "#ffffff" ? "red" : "#ffffff";}window.onload=function(){parent_elem=document.getElementById("pageWrap");child_div =parent_elem.getElementsByTagName("div");for(i=0; i<child_div.length;i++){if(child_div[i].className=="info"){child_div[i].style.backgroundColor="#ffffff";}}}/*--*//*]]>*/</script><style type="text/css">/*.info{display:none;}*/</style></head><body> <div id="pageWrap"> <div class="row" id="row1">Row (<a href="#" onClick="hideShow(this,event)">Show Info</a>)</div> <div class="row" id="row2">Row (<a href="#" onClick="hideShow(this,event)">Show Info</a>)</div> <div class="row" id="row3">Row (<a href="#" onClick="hideShow(this,event)">Show Info</a>)</div> <div class="row" id="row4">Row (<a href="#" onClick="hideShow(this,event)">Show Info</a>)</div> <div class="info" id="info1">Info1</div> <div class="info" id="info2">Info2</div> <div class="info" id="info3">Info3</div> <div class="info" id="info4">Info4</div> </div></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.