CODEWITHSUNDEEP
javascript
user7468494
user7468494

Reputation:

JavaScript show / hide html elements

Is there a cleaner way of achieving this in JavaScript, I'm trying to show / hide items based on a click function

var overview = document.getElementById("overview"); 
var schedule = document.getElementById("schedule");
var reports = document.getElementById("reports");

    function btnOverview_Click() {
        schedule.style.display = "none";
        reports.style.display = "none";
        overview.style.display = "block";
    }       
    function btnSchedule_Click() {
        overview.style.display = "none";
        reports.style.display = "none";
        schedule.style.display = "block";
    } 
    function btnReports_Click() {
        overview.style.display = "none";
        schedule.style.display = "none";
        reports.style.display = "block";
    }

Upvotes: 1

Views: 249

Answers (2)

Takit Isy
Takit Isy

Reputation: 10081

Avoiding all possible inline styling and JavaScript,
I suggest you to do the following:

// I added a class in your HTML
var elements = document.querySelectorAll(".myClass");
var buttons = document.querySelectorAll(".myButtons");

// Function to hide all "elements" except the one we clicked
function hideExceptThis() {
  elements.forEach(elm => elm.style.display = "none");
  // Get the value in "data" attribute
  var id = this.getAttribute("data"); // "this" refers to the one you clicked
  document.querySelector(id).style.display = "block";
}

// On load, bind the above function on click for each element
buttons.forEach(but => but.addEventListener("click", hideExceptThis));
#panel {
  border-bottom: 1px solid gray;
  background: #eee;
  padding: 8px;
}

.myClass {
  width: 240px;
  height: 40px;
  margin: 8px;
  padding: 8px;
}

#overview { background-color: #fdd; }
#schedule { background-color: #dfd; }
#reports  { background-color: #ddf; }
<div id="panel">
  <button class="myButtons" data="#overview">Only overview</button>
  <button class="myButtons" data="#schedule">Only schedule</button>
  <button class="myButtons" data="#reports">Only reports</button>
</div>
<div class="myClass" id="overview">Overview</div>
<div class="myClass" id="schedule">Schedule</div>
<div class="myClass" id="reports">Reports</div>

Hope it helps.

Upvotes: 3

CodeF0x
CodeF0x

Reputation: 2682

This is not really clean, but at least it saves some lines of code.

Pass this (the element that fires the function) to your function and set all elements to display: none;, but set the element that got clicked back to display: block;.

var overview = document.getElementById("overview");
var schedule = document.getElementById("schedule");
var reports = document.getElementById("reports");

function hide(element) {
  overview.style.display = "none";
  schedule.style.display = "none";
  reports.style.display = "none";
  element.style.display = "block";
}
<div id="overview" style="width: 100px; height: 15px; background-color: green" onclick="hide(this)"></div>
<div id="schedule" style="width: 100px; height: 15px; background-color: yellow" onclick="hide(this)"></div>
<div id="reports" style="width: 100px; height: 15px; background-color: blue" onclick="hide(this)"></div>

Upvotes: 0

Related Questions