Toggle block and none display using an anchor tag

user_14393584 0
Viewed 418

In my electron app I want to toggle between different screens, thus I need to use block and none displays. I have a side navbar which contain the anchor tags, whenever I click one of those I want my screen to block all the other screens and display the one which was clicked.

Required Code Below

Side NavBar -not attaching the css for it

<div class="sidebar">
  <a href="#home" class="nava" id="homebtn" onclick="showhome()">Home</a>
  <a href="#tasks" class="nava" id="taskbtn" onclick="showtasks()">Tasks</a>
  <a href="#contact" class="nava">TimeTable</a>
  <a href="#about" class="nava">Quick notes</a>
  <a href="#about" class="nava">Expenses</a>
</div>

Different Displays

<div id="home" class="screen" style="display: none">
  <h1 class="centertitle">Home</h1>
</div>


<div id="tasks" class="screen" style="display: none">
  <h1 class="centertitle">Tasks</h1>
</div>

Script

<script>
  function showtasks() {
    let task = document.getElementById("tasks");
    let taskbtn = document.getElementById("taskbtn");
    let allnav = document.getElementsByClassName("nava");
    let allscreens = document.getElementsByClassName("screen");
    allscreens.style.display = "none";
    task.style.display = "block";
    allnav.className = "";
    taskbtn.className = "active";
  }

  function showhome() {
    let home = document.getElementById("home");
    let homebtn = document.getElementById("homebtn");
    let allnav = document.getElementsByClassName("nava");
    let allscreens = document.getElementsByClassName("screen");
    allscreens.style.display = "none";
    home.style.display = "block";
    allnav.className = "";
    homebtn.className = "active";
  }
</script>
css html javascript
1 Answers

The problem here is the allscreens variable.

getElementsByClassName returns an array of elements with the given class name. So in order to set them all to display: none, you will need to loop through the elements.

let allscreens = document.getElementsByClassName("screen");
for (var i = 0; i < allscreens.length; i++) {
  allscreens[i].style.display = "none";
}


function showtasks() {
  let task = document.getElementById("tasks");
  let taskbtn = document.getElementById("taskbtn");
  let allnav = document.getElementsByClassName("nava");
  let allscreens = document.getElementsByClassName("screen");
  for (var i = 0; i < allscreens.length; i++ ) {
    allscreens[i].style.display = "none";
  }
  task.style.display = "block";
  allnav.className = "";
  taskbtn.className = "active";
}

function showhome() {
  let home = document.getElementById("home");
  let homebtn = document.getElementById("homebtn");
  let allnav = document.getElementsByClassName("nava");
  let allscreens = document.getElementsByClassName("screen");
  for (var i = 0; i < allscreens.length; i++ ) {
    allscreens[i].style.display = "none";
  }
  home.style.display = "block";
  allnav.className = "";
  homebtn.className = "active";
}
<div class="sidebar">
  <a href="#home" class="nava" id="homebtn" onclick="showhome()">Home</a>
  <a href="#tasks" class="nava" id="taskbtn" onclick="showtasks()">Tasks</a>
  <a href="#contact" class="nava">TimeTable</a>
  <a href="#about" class="nava">Quick notes</a>
  <a href="#about" class="nava">Expenses</a>
</div>

<div id="home" class="screen" style="display: none">
  <h1 class="centertitle">Home</h1>
</div>


<div id="tasks" class="screen" style="display: none">
  <h1 class="centertitle">Tasks</h1>
</div>

user_3917150
Related