CODEWITHSUNDEEP
javascripthtmljquery
newDev2000
newDev2000

Reputation: 311

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>

Upvotes: 0

Views: 35

Answers (2)

Cjmarkham
Cjmarkham

Reputation: 9681

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>

Upvotes: 2

Oliver Trampleasure
Oliver Trampleasure

Reputation: 3293

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>

Upvotes: 1

Related Questions