Problem with showing divs on click with Jquery

if you run my snippet and start clicking around you will be shown div’s like mercedes, boats or houses and that’s perfectly fine but problem is that when you first run this snippet nothing will be shown, you need to click something and that isn’t way to go. How can i make first div visible from the start and then you can mess around with changing divs. note I need to change divs becouse in my actual file there is a content

$(".listOrderNavPC a").on("click",function(e) {
  e.preventDefault()
  $(".categoryInfoWrapper").hide();
  $("#"+$(this).find(".textOrderPC").text()).show().fadeIn(500);
})

.grid-container-order {
  display: grid;
  grid-template-columns: 0.4fr 1.1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas: "leftOrderCol rightOrderCol";
  width: 60vw;
  margin-left: 20vw;
  margin-top: 5vh;
}

.leftOrderCol {
  grid-area: leftOrderCol;
}

.rightOrderCol {
  padding-top: 2vh;
  grid-area: rightOrderCol;
  border-left: 1px solid rgb(240, 240, 240);
}

.listOrderNavMobile {
  display: none;
}

.lineOrderPC {
  width: 90%;
  margin-left: 5%;
  height: 1px;
  background: rgb(238, 238, 238);
  margin-top: 1vh;
}

.listOrderWrapper {
  width: 100%;
  font-family: 'Montserrat', sans-serif;
}

.userWelcomeOrderPC {
  font-size: 18px;
  padding-bottom: 1vh;
  padding-left: 1vw;
}

.userNamePC {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -1px;
}

.linkOrderPC {
  position: relative;
  display: flex;
  width: 80%;
  align-items: center;
  font-size: 15px;
  line-height: 25px;
  padding: 12px 16px;
  color: rgb(0, 0, 0);
}

.linkOrderPC:hover {
  background: rgb(250, 250, 250);
  color: rgb(0, 0, 0);
}

.iconOrderPC {
  font-size: 22px;
  margin-right: 15px;
}



.categoryInfoWrapper { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<div class="grid-container-order">
  <div class="leftOrderCol">
    <div class="listOrderWrapper">
      <div class="listOrderNavPC">

        <a href="" class="linkOrderPC">
          <span class="iconOrderPC"></span>
          <span class="textOrderPC">Cars</span>
        </a>
        <a href="" class="linkOrderPC">
          <span class="iconOrderPC"></span>
          <span class="textOrderPC">Houses</span>
        </a>
        <a href="" class="linkOrderPC">
          <span class="iconOrderPC"></span>
          <span class="textOrderPC">Boats</span>
        </a>


      </div>
    </div>
  </div>
  <div class="rightOrderCol">
    <div class="container-fluid">

      <div class="categoryInfoWrapper" id="Cars">
        <div class="divCarsStyle">
          Mercedes
        </div>
      </div>
      <div class="categoryInfoWrapper" id="Houses">
        <div class="divHousesStyle">
          Mansion
        </div>
      </div>
      <div class="categoryInfoWrapper" id="Boats">
        <div class="divBoatsStyle">
          Boats
        </div>
      </div>

    </div>
  </div>
</div>

Answer

You could use JavaScript as mentioned in another answer, or you could use CSS to hide all but the first one.

.categoryInfoWrapper:not(:first-child) { display: none; }

$(".listOrderNavPC a").on("click",function(e) {
  e.preventDefault()
  $(".categoryInfoWrapper").hide();
  $("#"+$(this).find(".textOrderPC").text()).show().fadeIn(500);
})

.grid-container-order {
  display: grid;
  grid-template-columns: 0.4fr 1.1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas: "leftOrderCol rightOrderCol";
  width: 60vw;
  margin-left: 20vw;
  margin-top: 5vh;
}

.leftOrderCol {
  grid-area: leftOrderCol;
}

.rightOrderCol {
  padding-top: 2vh;
  grid-area: rightOrderCol;
  border-left: 1px solid rgb(240, 240, 240);
}

.listOrderNavMobile {
  display: none;
}

.lineOrderPC {
  width: 90%;
  margin-left: 5%;
  height: 1px;
  background: rgb(238, 238, 238);
  margin-top: 1vh;
}

.listOrderWrapper {
  width: 100%;
  font-family: 'Montserrat', sans-serif;
}

.userWelcomeOrderPC {
  font-size: 18px;
  padding-bottom: 1vh;
  padding-left: 1vw;
}

.userNamePC {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -1px;
}

.linkOrderPC {
  position: relative;
  display: flex;
  width: 80%;
  align-items: center;
  font-size: 15px;
  line-height: 25px;
  padding: 12px 16px;
  color: rgb(0, 0, 0);
}

.linkOrderPC:hover {
  background: rgb(250, 250, 250);
  color: rgb(0, 0, 0);
}

.iconOrderPC {
  font-size: 22px;
  margin-right: 15px;
}



.categoryInfoWrapper:not(:first-child) { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<div class="grid-container-order">
  <div class="leftOrderCol">
    <div class="listOrderWrapper">
      <div class="listOrderNavPC">

        <a href="" class="linkOrderPC">
          <span class="iconOrderPC"></span>
          <span class="textOrderPC">Cars</span>
        </a>
        <a href="" class="linkOrderPC">
          <span class="iconOrderPC"></span>
          <span class="textOrderPC">Houses</span>
        </a>
        <a href="" class="linkOrderPC">
          <span class="iconOrderPC"></span>
          <span class="textOrderPC">Boats</span>
        </a>


      </div>
    </div>
  </div>
  <div class="rightOrderCol">
    <div class="container-fluid">

      <div class="categoryInfoWrapper" id="Cars">
        <div class="divCarsStyle">
          Mercedes
        </div>
      </div>
      <div class="categoryInfoWrapper" id="Houses">
        <div class="divHousesStyle">
          Mansion
        </div>
      </div>
      <div class="categoryInfoWrapper" id="Boats">
        <div class="divBoatsStyle">
          Boats
        </div>
      </div>

    </div>
  </div>
</div>