I have a working code. What I want is when user click promo code link, the link property will be removed and will be non functional anymore. This is the working example http://jsfiddle.net/5DbN3/
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Have a promo code?";
}
else {
ele.style.display = "block";
text.innerHTML = "Have a promo code?";
}
}
</script>
<h1>GET STARTED</h1>
<form action="http://www....." method="post" accept-charset="utf-8">
<label for="zipcode">
<h2>Enter your zip code:</h2>
</strong>
</label>
<div>
<input type="text" name="zipcode" id="zipcode" maxlength="5"/>
</div>
<label for="promocode">
<a id="displayText" href="javascript:toggle();">Have a promo code?</a>
</label>
<div id="toggleText" style="display: none">
<input type="text" name="promocode" id="promocode"/>
</div>
<div>
<input type="submit" name="zipsubmit" value="GO" />
</div>
</form>
I believe you want:
or in jQuery
Working fiddle:
http://jsfiddle.net/5DbN3/1/