Problem with showing divs on click with Jquery

Question

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>

Cjmarkham · Accepted Answer · 2021-01-09 22:13:17Z

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>

Oliver Trampleasure · Accepted Answer · 2021-01-09 22:09:47Z

You can use the following line of code:

// Find the first link and click it
$(".listOrderNavPC a").first().click();

If you put this after your function it will programatically click on the first a tag in the element with class .listOrderNavPC.

Working Demo:

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

// Find the first link and click it
$(".listOrderNavPC a").first().click();

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

Collectives™ on Stack Overflow

Problem with showing divs on click with Jquery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related