Hello there, I'm using Twitter Bootstrap version 2.3.2 and have a form with a unique setup. The form includes a dropdown with a checkbox positioned to the right of it. The concept is that if the user clicks on the checkbox, the dropdown will be hidden and a new input field will appear for the user to enter a new position title.
When the checkbox is clicked, it hides the div containing the label and the div with the dropdown. However, the div with the new input label does display, but it seems to shift the next line of the form over slightly.
If you want to take a look at the code, here's the link: http://jsfiddle.net/mwoods98/sdcs3gka/3/
One strange thing worth mentioning is that even though I've set the second hidden div to .hide() in the script, it still appears briefly when the page loads.
$(function () {
$('#NewPositionDiv').hide();
$('#NewlabelPosTitle').hide();
$('#fcbNewPos').change(function () {
if ($('#fcbNewPos').is(':checked')) {
$('#PositionDiv').hide();
$('#labelPosTitle').hide();
$('#NewPositionDiv').show();
$('#NewlabelPosTitle').show();
$('#NewPositionName').focus();
} else {
$('#PositionDiv').show();
$('#NewPositionDiv').hide();
$('#NewlabelPosTitle').hide();
}
}).change();
});
This JavaScript code controls the visibility of the divs.
Thank you in advance!