JavaScript show / hide html elements

Question

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";
    }

Please, show some HTML markup - The way you're nesting your elements could be of help — Roko C. Buljan
– Roko C. Buljan, Commented Jun 1, 2018 at 11:55
"Is there a cleaner way of achieving this" if you just want to show/hide some elements then I'd say no. But if you have access to html and want to achive tab-like or accordion-like functionality then - yes. You could make code more generic using classes and data-attributes. — Yury Tarabanko
– Yury Tarabanko, Commented Jun 1, 2018 at 11:56
Do you want another way like not changing display property or want better code to do same thing — Ash
– Ash, Commented Jun 1, 2018 at 11:56
Better code to do the same thing - maybe I'm wrong but this seems like a very "bloated" solution. All the elements are at the same "level" - I don't want to access them by their selector - their position, id, class, could change. — user7468494
– user7468494, Commented Jun 1, 2018 at 12:07

Takit Isy · Accepted Answer · 2018-06-01 14:15:26Z

3

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.

edited Jun 1, 2018 at 14:15

answered Jun 1, 2018 at 13:15

Takit Isy

10.2k3 gold badges29 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Attersson Over a year ago

Absolutely better I think. And in order to make it 100% perfect, use elements.forEach(e=>e.style.display="none") and elements.forEach(e=>e.addEventListener("click", hideExceptThis))

Takit Isy Over a year ago

@Attersson Thanks for the suggestion, I've changed .getElementsByClassName() to .querySelectorAll() to be able to apply it.

Takit Isy Over a year ago

@Attersson, using .getElementsByClassName(), it says elements.forEach is not a function. stackoverflow.com/questions/24266313/…

Attersson Over a year ago

Makes little sense since it is an array (woops. HTMLCollection). perhaps [].forEach.apply(e=>{e.style.display="none";}, elements)

user7468494 Over a year ago

The above hide the "button" (clicked item) - i am trying to hide the following: var overview = document.getElementById("overview"); var schedule = document.getElementById("schedule"); var reports = document.getElementById("reports");

|

CodeF0x · Accepted Answer · 2018-06-01 12:01:24Z

0

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>

answered Jun 1, 2018 at 12:01

CodeF0x

2,6676 gold badges19 silver badges29 bronze badges

5 Comments

Takit Isy Over a year ago

Argh! All that inline styling and script!…

CodeF0x Over a year ago

@TakitIsy Indeed. :p

CodeF0x Over a year ago

@TakitIsy +1 for your answer, it's much better than mine. x)

Takit Isy Over a year ago

Thanks, I appreciate! :)

Takit Isy Over a year ago

@EdwardDoyle I think you didn't comment the right answer… ;) CodeF0x, sorry to have stolen you the "correct answer"!

Collectives™ on Stack Overflow

JavaScript show / hide html elements

2 Answers 2

6 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related