show /hide complete div-CodePudding

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;">