Check out this code snippet containing a button and a div:
<button id="button2" class="btn btn-success btn-block" type="button" data-toggle="collapse" data-target="#collapseGroupTwo" aria-expanded="false" aria-controls="collapseGroupTwo">
<span style="float: left" id="span2a">Add New User</span>
<span id="span2" class="glyphicon-plus" style="float: right; font-weight: bold">
</span>
</button>
<div id="collapseGroupTwo" class="collapse">
//snip
</div>
<script>
$('#button2').click(function () {
$('#span2').toggleClass("glyphicon-minus")
})
</script>
If the user clicks 'Cancel' on cancelUpdateUser, the following JS code will execute:
<script type="text/javascript">
$(document).ready(function () {
$('#cancelUpdateUser').click(function () {
$('#button3').hide();
$('#collapseGroupThree').hide();
$('#button2').show();
document.getElementById("updateUserForm").reset();
})
})
</script>
After implementing this function, clicking button2 should expand collapseGroupTwo. However, if after bringing back button2 with a click event, collapseGroupTwo doesn't expand when clicking button2 again. Is it necessary to further toggle the collapse attribute on collapseGroupTwo?