simpli Posted April 7, 2009 Share Posted April 7, 2009 Hi, I have a table with some total user data and the underlying detail. I want it that when the user click on the summary rows that the table expands to show the underlying data. I am on firefox on a mac. What I do is I use CSS to have all the detail tbodies to start collapsed: tbody.corps{ display:none; } On the click event in the summary table rows I have this function, which I have corrected after recommendations from people in this forum. id_tb is a table body id . function ShowHide(id_tb) { var tablebody = document.getElementById(id_tb) if (tablebody.style.display == "block"){ document.getElementById(id_tb).style.display="none"; }else{ document.getElementById(id_tb).style.display="block"; } } This code is unfortunately not working. When I use block my summary rows stay the same and the tbody rows expand but at the very bottom of the whole table. Not good. When I use function ShowHide(id_tb) { var tablebody = document.getElementById(id_tb) if (tablebody.style.display == ""){ document.getElementById(id_tb).style.display="none"; }else{ document.getElementById(id_tb).style.display=""; } } nothing happens whatsoever in the onclick event. Can anyone tell me what I am doing incorrectly? I'd like a solution that works cross browser but right now a solution that work in FF would be good for my soul and I could try for cross-browser bliss later. Any help is really welcome cause I'm really stuck. Thanks, J-R Quote Link to comment Share on other sites More sharing options...
premiso Posted April 7, 2009 Share Posted April 7, 2009 Have you checked in the Javascript Error Console Firefox provides, to see what error that is showing? Tools > Error Console You may want to clear it then try and hiding it again and see what it says. Quote Link to comment Share on other sites More sharing options...
darkfreaks Posted April 8, 2009 Share Posted April 8, 2009 corrected a few minor errors in your problem code: function ShowHide(id_tb) { var tablebody = document.getElementById(id_tb); if (tablebody.style.display === ""){ document.getElementById(id_tb).style.display="none"; }else{ document.getElementById(id_tb).style.display=""; } } Quote Link to comment Share on other sites More sharing options...
simpli Posted April 8, 2009 Author Share Posted April 8, 2009 There is no error message, the code executes. It just doesn't do anything. Darkfreaks: If I understand what you do, you check if the variable passed in parameter is the right type but I'm supposed to pass the id of the tbody and that's what I do no? Quote Link to comment Share on other sites More sharing options...
darkfreaks Posted April 8, 2009 Share Posted April 8, 2009 === is preffered over == and makes sure it equals something exactly. also display:table would work Try: function ShowHide(id_tb) { var tablebody = document.getElementById(id_tb); if (tablebody.style.display === "table"){ document.getElementById(id_tb).style.display="none"; }else{ document.getElementById(id_tb).style.display="table"; } } Quote Link to comment Share on other sites More sharing options...
xtopolis Posted April 8, 2009 Share Posted April 8, 2009 redacted Quote Link to comment Share on other sites More sharing options...
simpli Posted April 8, 2009 Author Share Posted April 8, 2009 redacte? What does that mean?? Quote Link to comment Share on other sites More sharing options...
xtopolis Posted April 8, 2009 Share Posted April 8, 2009 I was going to respond, but my statement was incorrect. Ignore me Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.