CODEWITHSUNDEEP
javascripthtmlcssfrontend
Leon
Leon

Reputation: 69

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.

Upvotes: 1

Views: 87

Answers (4)

Shadow Avenger
Shadow Avenger

Reputation: 1

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

Upvotes: 0

Kinglish
Kinglish

Reputation: 23664

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

Upvotes: 1

mplungjan
mplungjan

Reputation: 178285

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

Upvotes: 0

exphoenee
exphoenee

Reputation: 450

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

Upvotes: 0

Related Questions