I have 2 div's, in that i want show only one div at a time and hide the second div ex. div 1 is visible then div 2 should be hidden. so far i tried up to this demo
Its working as expected other than on page load both div's were visible. I want to hide div 1 and div 2 should be visible at first. May i know how to hide div 1 at first?
<div class="container">
<div class="row">
<div class="col-6 card-body targetDiv" id="div1">
<div class="form-group pt-4">
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<a class="btn btn-secondary showSingle" target="2" title="Add Reference"><i class="fas fa-ellipsis-v"></i></a>
</div>
<div class="col-6 card-body targetDiv" id="div2">
<div class="form-group pt-4">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<a class="btn btn-secondary showSingle" target="1" title="Add Reference"><i class="fas fa-file"></i></a>
</div>
</div>
CodePudding user response:
Just simply add style
block on your "div1" component;
Something like this:
<div class="col-6 card-body targetDiv" id="div1" style="display:none;">