I have a signup page with two buttons. When one button is clicked, the corresponding container displays. When a button is clicked the bg color changes and sticks, even after I select the other button. Then, if I select the button again it goes back to its unselected/inactive color.
I want the clicked button to maintain its active color, but only if the other button is not clicked. If the other button is clicked, I want the first button to go back to its original bg color.
Here is the js:
<script type = "text/javascript">
function displayForm(c) {
if (c.value == "1") {
document.getElementById("container1").style.display = 'inline';
document.getElementById("container2").style.display = 'none';
} else if (c.value == "2") {
document.getElementById("container1").style.display = 'none';
document.getElementById("container2").style.display = 'inline';
} else {}
}
</script>
And here are the buttons (sorry for formatting issues):
<!--SELECTION BUTTONS-->
<form>
<div class="control-group">
<label class="control-label">Are you a:</label>
<div class="controls">
<p><div id="account-type" name="account-type" class="btn-group selection-buttons" data-toggle="buttons-radio">
<button value="1" type="button" name="formselector" onClick="displayForm(this)" id="button1" class="btn btn-info">
Buttons1</button>
<button value="2" type="button" name="formselector" onClick="displayForm(this)" id="button2" class="btn btn-info">Button2</button>
</div></p>
</div>
</div>
</form>
Here is the CSS (using Bootstrap):
/* SWITCH BUTTONS */
.selection-buttons button{
width: 140px;
height: 60px;
color: #FFF;
background-color: #FFB10D;
border-color: #fff; /* e59f0b */
}
.selection-buttons .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open .dropdown-toggle.btn-info {
color: #FFF;
background-color: #00CC66;
border-color: #fff; /* 00b75b */
}
Thank you!!
Aucun commentaire:
Enregistrer un commentaire