javascript - Click Replaces One Div With Another

Question

in this jsfiddle you can see my html code. You can see that all content on the right side is visible, I want to replace the div on click so when user clicks car link on the left side div with cars is visible on the right side and so on and so on with other links. I can't only replace the text because content will be generated by backend and there will be some logic with those divs

.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;
}

@media (max-width:950px) {
  .listOrderNavPC {
    display: none;
  }
  .listOrderNavMobile {
    display: block;
  }
  .categoryRootMobileOrder {
    height: 100%;
    display: grid;
    place-items: center;
    --gutter: 10px;
  }
  .hsOrder {
    grid-gap: 5px;
    grid-template-columns: 10px repeat(3, calc(35% - var(--gutter) * 2)) 10px;
  }
  .userWelcomeOrderMobile {
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    font-size: 19px;
  }
  .userNameMobile {
    font-weight: 600;
    letter-spacing: -1px;
    font-size: 21px;
  }
}

<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="Car">
        <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>

question from:https://stackoverflow.com/questions/65600451/click-replaces-one-div-with-another

Answer 1

Make sure the text and the IDs matched

If you cannot change the text, we can use a data-attribute

I added css

.categoryInfoWrapper { display: none; }

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

.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;
}

@media (max-width:950px) {
  .listOrderNavPC {
    display: none;
  }
  .listOrderNavMobile {
    display: block;
  }
  .categoryRootMobileOrder {
    height: 100%;
    display: grid;
    place-items: center;
    --gutter: 10px;
  }
  .hsOrder {
    grid-gap: 5px;
    grid-template-columns: 10px repeat(3, calc(35% - var(--gutter) * 2)) 10px;
  }
  .userWelcomeOrderMobile {
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    font-size: 19px;
  }
  .userNameMobile {
    font-weight: 600;
    letter-spacing: -1px;
    font-size: 21px;
  }
}

.categoryInfoWrapper { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.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>