Мне нужно иметь возможность скрыть форму form1, но НЕ пространство начальной загрузки col-4-md, которое оно занимает. Когда я скрываю form1, form2, который находится в том же ряду, выдвигается через 4-колонное расстояние. Короткое одноминутное видео может быть самым простым способом увидеть, что я пытаюсь сделать.
HTML-код:
<div class="row">
<div class="col-1"> </div>
<input type="submit" class="col-4 btn btn-success" id="delivery_btn" value="Enter Delivery Address"></input>
<div class="col-2 center"> OR </div>
<input type="submit" class="col-4 btn btn-success" id="pickup_btn" value="Find Pickup Location"></input>
<div class="col-1"> </div>
</div>
<div class="row">
<div class="col-1"> </div>
<form class="col-4" id='form1'>
<label>Enter Address</label>
<input type="text" placeholder="Example: 123 Main St."></input> <br>
<label>Enter Zip Code</label>
<input type="text" placeholder="Enter Zip Code"></input> <br>
<input type="submit"></input>
</form>
<div class="col-2"></div>
<form class="col-4" id='form2'>
<input type="text" value="Zip"></input ><br>
<input type="submit" value="search"></input>
</form>
</div>
Код запроса
$('#delivery_btn').on('click', function(){
$('#form1').toggle();
});
$('#pickup_btn').on('click', function(){
$('#form2').toggle();
});
Использование prop, как Изменение .prop с помощью jQuery не вызывает событие .change я был одной идеей, но prop НЕ поддерживается в IE. Кроме того, я даже не уверен, что это сработает, поскольку он, вероятно, все еще будет скрывать col-4.
Я уверен, что мог бы быть простой способ решить то, что я пытаюсь сделать. Заранее спасибо.