I am trying to show three buttons on one button click. Before a button click all three buttons are hidden. I set the hidden property and I am also calling a function on a button click. The problem is that when I load the page all buttons are visible. It was working perfectly before I added CSS. I don't understand where the problem is.
Here is my code:
.buttons a, .buttons button{ display:block; float:left; margin:0 7px 0 0; background-color:#f5f5f5; border:1px solid #dedede; border-top:1px solid #eee; border-left:1px solid #eee; font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif; font-size:12px; line-height:130%; text-decoration:none; font-weight:bold; color:#565656; cursor:pointer; padding:5px 10px 6px 7px; /* Links */ } .buttons button{ width:auto; overflow:visible; padding:4px 10px 3px 7px; /* IE6 */ } .buttons button[type]{ padding:5px 10px 5px 7px; /* Firefox */ line-height:17px; /* Safari */ } *:first-child+html button[type]{ padding:4px 10px 3px 7px; /* IE7 */ } .buttons button img, .buttons a img{ margin:0 3px -3px 0 !important; padding:0; border:none; width:16px; height:16px; } /* STANDARD */ button:hover, .buttons a:hover{ background-color:#dff4ff; border:1px solid #c2e1ef; color:#336699; } .buttons a:active{ background-color:#6299c5; border:1px solid #6299c5; color:#fff; } /* POSITIVE */ button.positive, .buttons a.positive{ color:#529214; } .buttons a.positive:hover, button.positive:hover{ background-color:#E6EFC2; border:1px solid #C6D880; color:#529214; } .buttons a.positive:active{ background-color:#529214; border:1px solid #529214; color:#fff; } /* NEGATIVE */ .buttons a.negative, button.negative{ color:#d12f19; } .buttons a.negative:hover, button.negative:hover{ background:#fbe3e4; border:1px solid #fbc2c4; color:#d12f19; } .buttons a.negative:active{ background-color:#d12f19; border:1px solid #d12f19; color:#fff; } /* REGULAR */ button.regular, .buttons a.regular{ color:#336699; } .buttons a.regular:hover, button.regular:hover{ background-color:#dff4ff; border:1px solid #c2e1ef; color:#336699; } .buttons a.regular:active{ background-color:#6299c5; border:1px solid #6299c5; color:#fff; }<html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="STYLESHEET" type="text/css" href="dba_style/buttons.css" /> <title>Untitled Document</title> <script type="text/javascript"> function change(){ document.getElementById("save").hidden = ""; document.getElementById("change").hidden = ""; document.getElementById("cancel").hidden = ""; } </script> </head> <body> <form name="form1" method="post" action=""> <div> <button name="edit" onclick="change();"> <img src="dba_images/textfield_key.png" alt=""/> Edit </button> <button type="submit" name="save" hidden="hidden"> <img src="dba_images/apply2.png" alt=""/> Save </button> <button name="change" hidden="hidden"> <img src="dba_images/textfield_key.png" alt=""/> change </button> <button name="cancel" hidden="hidden"> <img src="dba_images/cross.png" alt=""/> Cancel </button> </div> </form> </body> </html>What changes can I make, so that when I click on edit it sets the hidden property of three buttons to false?
2 Answers
It also works without jQuery if you do the following changes:
Add
type="button"to the edit button in order not to trigger submission of the form.Change the name of your function from
change()to anything else.Don't use
hidden="hidden", use CSS instead:style="display: none;".
The following code works for me:
<html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="STYLESHEET" type="text/css" href="dba_style/buttons.css" /> <title>Untitled Document</title> </head> <script type="text/javascript"> function do_change(){ document.getElementById("save").style.display = "block"; document.getElementById("change").style.display = "block"; document.getElementById("cancel").style.display = "block"; } </script> <body> <form name="form1" method="post" action=""> <div> <button type="button" name="edit" onclick="do_change(); return false;"> <img src="dba_images/textfield_key.png" alt=""/> Edit </button> <button type="submit" name="save"> <img src="dba_images/apply2.png" alt=""/> Save </button> <button name="change"> <img src="dba_images/textfield_key.png" alt=""/> change </button> <button name="cancel"> <img src="dba_images/cross.png" alt=""/> Cancel </button> </div> </form> </body> </html> <html> <head> <script src=""></script> <script> function showButtons () { $('#b1, #b2, #b3').show(); } </script> <style type="text/css"> #b1, #b2, #b3 { display: none; } </style> </head> <body> <a href="#" onclick="showButtons();">Show me the money!</a> <input type="submit" value="B1" /> <input type="submit" value="B2"/> <input type="submit" value="B3" /> </body> </html> 
