make a div show on page load

April 21, 2022

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 :

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