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{_x000D_
display:block;_x000D_
float:left;_x000D_
margin:0 7px 0 0;_x000D_
background-color:#f5f5f5;_x000D_
border:1px solid #dedede;_x000D_
border-top:1px solid #eee;_x000D_
border-left:1px solid #eee;_x000D_
_x000D_
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;_x000D_
font-size:12px;_x000D_
line-height:130%;_x000D_
text-decoration:none;_x000D_
font-weight:bold;_x000D_
color:#565656;_x000D_
cursor:pointer;_x000D_
padding:5px 10px 6px 7px; /* Links */_x000D_
}_x000D_
.buttons button{_x000D_
width:auto;_x000D_
overflow:visible;_x000D_
padding:4px 10px 3px 7px; /* IE6 */_x000D_
}_x000D_
.buttons button[type]{_x000D_
padding:5px 10px 5px 7px; /* Firefox */_x000D_
line-height:17px; /* Safari */_x000D_
}_x000D_
*:first-child+html button[type]{_x000D_
padding:4px 10px 3px 7px; /* IE7 */_x000D_
}_x000D_
.buttons button img, .buttons a img{_x000D_
margin:0 3px -3px 0 !important;_x000D_
padding:0;_x000D_
border:none;_x000D_
width:16px;_x000D_
height:16px;_x000D_
}_x000D_
_x000D_
/* STANDARD */_x000D_
_x000D_
button:hover, .buttons a:hover{_x000D_
background-color:#dff4ff;_x000D_
border:1px solid #c2e1ef;_x000D_
color:#336699;_x000D_
}_x000D_
.buttons a:active{_x000D_
background-color:#6299c5;_x000D_
border:1px solid #6299c5;_x000D_
color:#fff;_x000D_
}_x000D_
_x000D_
/* POSITIVE */_x000D_
_x000D_
button.positive, .buttons a.positive{_x000D_
color:#529214;_x000D_
}_x000D_
.buttons a.positive:hover, button.positive:hover{_x000D_
background-color:#E6EFC2;_x000D_
border:1px solid #C6D880;_x000D_
color:#529214;_x000D_
}_x000D_
.buttons a.positive:active{_x000D_
background-color:#529214;_x000D_
border:1px solid #529214;_x000D_
color:#fff;_x000D_
}_x000D_
_x000D_
/* NEGATIVE */_x000D_
_x000D_
.buttons a.negative, button.negative{_x000D_
color:#d12f19;_x000D_
}_x000D_
.buttons a.negative:hover, button.negative:hover{_x000D_
background:#fbe3e4;_x000D_
border:1px solid #fbc2c4;_x000D_
color:#d12f19;_x000D_
}_x000D_
.buttons a.negative:active{_x000D_
background-color:#d12f19;_x000D_
border:1px solid #d12f19;_x000D_
color:#fff;_x000D_
}_x000D_
_x000D_
/* REGULAR */_x000D_
_x000D_
button.regular, .buttons a.regular{_x000D_
color:#336699;_x000D_
}_x000D_
.buttons a.regular:hover, button.regular:hover{_x000D_
background-color:#dff4ff;_x000D_
border:1px solid #c2e1ef;_x000D_
color:#336699;_x000D_
}_x000D_
.buttons a.regular:active{_x000D_
background-color:#6299c5;_x000D_
border:1px solid #6299c5;_x000D_
color:#fff;_x000D_
}<html xmlns="http://www.w3.org/1999/xhtml">_x000D_
<head>_x000D_
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />_x000D_
<link rel="STYLESHEET" type="text/css" href="dba_style/buttons.css" />_x000D_
<title>Untitled Document</title> _x000D_
_x000D_
<script type="text/javascript">_x000D_
function change(){_x000D_
document.getElementById("save").hidden = "";_x000D_
document.getElementById("change").hidden = "";_x000D_
document.getElementById("cancel").hidden = "";_x000D_
_x000D_
}_x000D_
</script>_x000D_
_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
<form name="form1" method="post" action="">_x000D_
<div class="buttons">_x000D_
_x000D_
<button class="regular" name="edit" id="edit" onclick="change();">_x000D_
<img src="dba_images/textfield_key.png" alt=""/>_x000D_
Edit_x000D_
</button>_x000D_
_x000D_
<button type="submit" class="positive" name="save" id="save" hidden="hidden">_x000D_
<img src="dba_images/apply2.png" alt=""/>_x000D_
Save_x000D_
</button>_x000D_
_x000D_
<button class="regular" name="change" hidden="hidden" id="change">_x000D_
<img src="dba_images/textfield_key.png" alt=""/>_x000D_
change_x000D_
</button>_x000D_
_x000D_
<button class="negative" name="cancel" id="cancel" hidden="hidden">_x000D_
<img src="dba_images/cross.png" alt=""/>_x000D_
Cancel_x000D_
</button>_x000D_
</div>_x000D_
</form>_x000D_
</body>_x000D_
</html>What changes can I make, so that when I click on edit it sets the hidden property of three buttons to false?
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="http://www.w3.org/1999/xhtml">
<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 class="buttons">
<button type="button" class="regular" name="edit" id="edit" onclick="do_change(); return false;">
<img src="dba_images/textfield_key.png" alt=""/>
Edit
</button>
<button type="submit" class="positive" name="save" id="save" style="display:none;">
<img src="dba_images/apply2.png" alt=""/>
Save
</button>
<button class="regular" name="change" id="change" style="display:none;">
<img src="dba_images/textfield_key.png" alt=""/>
change
</button>
<button class="negative" name="cancel" id="cancel" style="display:none;">
<img src="dba_images/cross.png" alt=""/>
Cancel
</button>
</div>
</form>
</body>
</html>