'make a div show on page load

const links = Array.from(document.querySelectorAll("a"));
const tabs = Array.from(document.querySelectorAll(".tabcontent"))

const hideAll = () => tabs.forEach((tab)=>tab.style.display = "none");
hideAll();

links.forEach((link)=>{
    link.addEventListener("click", (e)=>{
        e.preventDefault();
        hideAll();
        tabs.filter(tab => tab.id === link.dataset.target)[0].style.display = "block";
    });
});

.tabcontent{
    display: none;
    color: white;
}

<!--navigation-->
<div class="col nav">
    <ul>
        <li class="nav-item nav-li">
            <div class="py-3">
                <a href="#" class="" id="" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right" data-target="home">
                    <i class="fa-solid fa-house-user bi"></i>
                    <p>Home</p>
                </a>
            </div>
        </li>
        <li class="nav-item nav-li">
            <div class="py-3">
                <a href="#" class="" id="defaultOpen" aria-current="page" title="Profile" data-bs-toggle="tooltip" data-bs-placement="right" data-target="profile">
                    <i class="fa-solid fa-house-user bi"></i>
                    <p>profile</p>
                </a>
            </div>
        </li>
        <li class="nav-item nav-li">
            <div class="py-3">
                <a href="#" class="" id="defaultOpen" aria-current="page" title="Deposit" data-bs-toggle="tooltip" data-bs-placement="right" data-target="deposit">
                    <i class="fa-solid fa-house-user bi"></i>
                    <p>deposit</p>
                </a>
            </div>
        </li>
        <li class="nav-item nav-li">
            <div class="py-3">
                <a href="#" class="" id="defaultOpen" aria-current="page" title="Withdrawal" data-bs-toggle="tooltip" data-bs-placement="right" data-target="withdraw">
                    <i class="fa-solid fa-house-user bi"></i>
                    <p>withdraw</p>
                </a>
            </div>
        </li>
    </ul>
</div>
<!--end of navigation-->
<!--Pages-->
<div class="tabcontent col" id="home">
    <div class="text-center bg-black">
        <h3 class="">HomePage</h3>
    </div>
</div>
<div class="tabcontent" id="profile">
    <div class="text-center bg-primary">
        <h3>Profile</h3>
    </div>
</div>
<div class="tabcontent" id="deposit">
    <div class="text-center bg-danger">
        <h3>Deposit</h3>
    </div>
</div>
<div class="tabcontent" id="withdrawal">
    <div class="text-center bg-warning">
        <h3>Withdrawal</h3>
    </div>
</div>
<!--End of Pages-->

This is a navigation toggler that toggles between showing different divs id=(home, profile,deposit,withdrawal).

I need the div id=home to show by default immediately the page loads.

Solution 1:^[1]

I made a function that takes one String argument. Hiding all divs, and after then set the display of the first div that the id is equal the given string. At initialization the given string is home.

const links = Array.from(document.querySelectorAll("a"));
const tabs = Array.from(document.querySelectorAll(".tabcontent"))

const hideAll = () => tabs.forEach((tab) => tab.style.display = "none");

const showOne = (target) => {
  hideAll();
  tabs.filter(tab => tab.id === target)[0].style.display = "block";
}

showOne("home");

links.forEach((link)=>{
  link.addEventListener("click", (e) => {
    e.preventDefault();
    showOne(link.dataset.target);
  });
});

<!--navigation-->
 <div class="col nav">
  <ul>
   <li class="nav-item nav-li">
    <div class="py-3">
<a href="#" class="" id="" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right" data-target="home">
  <i class="fa-solid fa-house-user bi"></i>
  <p>Home</p>
</a>
</div>
</li>
<li class="nav-item nav-li">
<div class="py-3">
<a href="#" class="" id="defaultOpen" aria-current="page" title="Profile" data-bs-toggle="tooltip" data-bs-placement="right" data-target="profile">
  <i class="fa-solid fa-house-user bi"></i>
  <p>profile</p>
</a>
</div>
</li>
<li class="nav-item nav-li">
<div class="py-3">
<a href="#" class="" id="defaultOpen" aria-current="page" title="Deposit" data-bs-toggle="tooltip" data-bs-placement="right" data-target="deposit">
  <i class="fa-solid fa-house-user bi"></i>
  <p>deposit</p>
  </a>
  </div>
</li>
<li class="nav-item nav-li">
  <div class="py-3">
<a href="#" class="" id="defaultOpen" aria-current="page" title="Withdrawal" data-bs-toggle="tooltip" data-bs-placement="right" data-target="withdrawal">
  <i class="fa-solid fa-house-user bi"></i>
  <p>withdraw</p>
</a>
</div>
</li>
</ul>
</div>
  <!--end of navigation-->
   <!--Pages-->

    
  <div class="tabcontent col" id="home">
    <div class="text-center bg-black">
     <h3 class="">HomePage</h3>
    </div>
  </div>
  <div class="tabcontent" id="profile">
    <div class="text-center bg-primary">
     <h3>Profile</h3>
    </div>
  </div>
  <div class="tabcontent" id="deposit">
    <div class="text-center bg-danger">
     <h3>Deposit</h3>
    </div>
 </div>
 <div class="tabcontent" id="withdrawal">
    <div class="text-center bg-warning">
     <h3>Withdrawal</h3>
    </div>
 </div>

 <!--End of Pages-->

Solution 2:^[2]

Here's one way to approach it. Make your event listener a separate function so you can call it on page load using a 'faked' event object as the argument.

document.addEventListener("DOMContentLoaded", () => {
  let links = document.querySelectorAll("li.nav-item a")
  links.forEach((link) => link.addEventListener("click", doLink));

  function doLink(e) {
    if (e.hasOwnProperty('preventDefault')) e.preventDefault();
    document.querySelectorAll(".tabcontent").forEach(t => t.classList.toggle('show', e.currentTarget.dataset.target === t.id));
    links.forEach(t => t.closest('li').classList.toggle('active', t.dataset.target == e.currentTarget.dataset.target))
  }
  doLink({
    currentTarget: document.querySelector('[data-target=home]')
  })
})

.tabcontent {
  display: none;
}

.tabcontent.show {
  display: block;
}

.active {
  background: yellow;
}

<!--navigation-->
<div class="col nav">
  <ul>
    <li class="nav-item nav-li">
      <div class="py-3">
        <a href="#" class="" id="" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right" data-target="home">
          <i class="fa-solid fa-house-user bi"></i>
          <p>Home</p>
        </a>
      </div>
    </li>
    <li class="nav-item nav-li">
      <div class="py-3">
        <a href="#" class="" id="defaultOpen" aria-current="page" title="Profile" data-bs-toggle="tooltip" data-bs-placement="right" data-target="profile">
          <i class="fa-solid fa-house-user bi"></i>
          <p>profile</p>
        </a>
      </div>
    </li>
    <li class="nav-item nav-li">
      <div class="py-3">
        <a href="#" class="" id="defaultOpen" aria-current="page" title="Deposit" data-bs-toggle="tooltip" data-bs-placement="right" data-target="deposit">
          <i class="fa-solid fa-house-user bi"></i>
          <p>deposit</p>
        </a>
      </div>
    </li>
    <li class="nav-item nav-li">
      <div class="py-3">
        <a href="#" class="" id="defaultOpen" aria-current="page" title="Withdrawal" data-bs-toggle="tooltip" data-bs-placement="right" data-target="withdrawal">
          <i class="fa-solid fa-house-user bi"></i>
          <p>withdrawal</p>
        </a>
      </div>
    </li>
  </ul>
</div>
<!--end of navigation-->
<!--Pages-->
<div class="tabcontent col" id="home">
  <div class="text-center bg-black">
    <h3 class="">HomePage</h3>
  </div>
</div>
<div class="tabcontent" id="profile">
  <div class="text-center bg-primary">
    <h3>Profile</h3>
  </div>
</div>
<div class="tabcontent" id="deposit">
  <div class="text-center bg-danger">
    <h3>Deposit</h3>
  </div>
</div>
<div class="tabcontent" id="withdrawal">
  <div class="text-center bg-warning">
    <h3>Withdrawal</h3>
  </div>
</div>
<!--End of Pages-->

Solution 3:^[3]

It is a lot simpler if you delegate - I gave nav an ID (but you can use querySelector("div.nav") if you do not want to use an ID)

I then use the hidden attribute for simplicity

window.addEventListener("DOMContentLoaded", () => { // when page is ready
  const tabs = document.querySelectorAll(".tabcontent");
  const nav = document.getElementById("nav");
  const hideAllBut = id => tabs.forEach(tab => tab.hidden = tab.id != id)
  hideAllBut("home");

  nav.addEventListener("click", e => { // a click in the nav div
    const tgt = e.target.closest("a")
    if (tgt) {
      e.preventDefault();
      hideAllBut(tgt.dataset.target);
    }
  });
});

<!--navigation-->
<div class="col nav" id="nav">
  <ul>
    <li class="nav-item nav-li">
      <div class="py-3">
        <a href="#" class="" id="" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right" data-target="home">
          <i class="fa-solid fa-house-user bi"></i>
          <p>Home</p>
        </a>
      </div>
    </li>
    <li class="nav-item nav-li">
      <div class="py-3">
        <a href="#" class="" id="defaultOpen" aria-current="page" title="Profile" data-bs-toggle="tooltip" data-bs-placement="right" data-target="profile">
          <i class="fa-solid fa-house-user bi"></i>
          <p>profile</p>
        </a>
      </div>
    </li>
    <li class="nav-item nav-li">
      <div class="py-3">
        <a href="#" class="" id="defaultOpen" aria-current="page" title="Deposit" data-bs-toggle="tooltip" data-bs-placement="right" data-target="deposit">
          <i class="fa-solid fa-house-user bi"></i>
          <p>deposit</p>
        </a>
      </div>
    </li>
    <li class="nav-item nav-li">
      <div class="py-3">
        <a href="#" class="" id="defaultOpen" aria-current="page" title="Withdrawal" data-bs-toggle="tooltip" data-bs-placement="right" data-target="withdrawal">
          <i class="fa-solid fa-house-user bi"></i>
          <p>withdraw</p>
        </a>
      </div>
    </li>
  </ul>
</div>
<!--end of navigation-->
<!--Pages-->
<div class="tabcontent col" id="home">
  <div class="text-center bg-black">
    <h3 class="">HomePage</h3>
  </div>
</div>
<div class="tabcontent" id="profile">
  <div class="text-center bg-primary">
    <h3>Profile</h3>
  </div>
</div>
<div class="tabcontent" id="deposit">
  <div class="text-center bg-danger">
    <h3>Deposit</h3>
  </div>
</div>
<div class="tabcontent" id="withdrawal">
  <div class="text-center bg-warning">
    <h3>Withdrawal</h3>
  </div>
</div>
<!--End of Pages-->

Solution 4:^[4]

You can use Window.onload = function(){} in the javascript

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Kinglish
Solution 3
Solution 4	Shadow Avenger

'make a div show on page load

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]