Hide one div and show another on click

Question

I want to hide a div (switch) and show another div (hiddenonload) when the button is pressed. I've managed to hide the switch div on press but how do I show the hiddenonload div, when the button is pressed?

My code

var button = document.querySelector("button");
var element = document.querySelector(".switch");

button.addEventListener("click", function() {
    element.classList.toggle("hide");
});

.switch {
    opacity: 1;
}

.switch.hide {
    opacity: 0;
}

.hiddenonload {
    display: none;
}

<div class="switch"> 
  <button>
    <a>Hide me on click</a>
  </button>
</div>

<div class ="hiddenonload">
  <p>Show me</p>
</div>

possibly duplicate http://stackoverflow.com/questions/4528085/toggle-show-hide-div-with-button http://stackoverflow.com/questions/19074171/how-to-toggle-a-divs-visibility-by-using-a-button-click And many more — Gaurav joshi, Dec 05 '16 at 09:42

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

Just add another classList.toggle to remove the .hiddenonload class of the element you want to show.

Demo

var button = document.querySelector("button");
var element = document.querySelector(".switch");
var element2 = document.querySelector(".hiddenonload");

button.addEventListener("click", function() {
    element.classList.toggle("hide");
    element2.classList.toggle("hiddenonload");
});

.switch {
    opacity: 1;
}

.switch.hide {
    opacity: 0;
}

.hiddenonload {
    display: none;
}

<div class="switch"> 
  <button>
    <a>Hide me on click</a>
  </button>
</div>

<div class ="hiddenonload">
  <p>Show me</p>
</div>

Here's a version with a couple of other improvements :

var toggler = document.querySelector(".toggler");
var button = sw.querySelector("button");
var toshow = document.querySelector(".hidden");

button.addEventListener("click", function() {
    toggler.classList.toggle("hidden");
    toshow.classList.toggle("hidden");
});

.hidden {
    display: none;
}

<div class="toggler"> 
  <button>
    <a>Hide me on click</a>
  </button>
</div>

<div class ="hidden">
  <p>Show me</p>
</div>

@Benny : You're welcome. I added a second version with a few more improvements ;-) — John Slegers, Dec 05 '16 at 09:54

score 0 · Answer 2 · answered Dec 05 '16 at 09:46

Try this.

var button = document.querySelector("button");
var element = document.querySelector(".hiddenonload");

button.addEventListener("click", function() {
  element.classList.toggle("hiddenonload");
  button.style.display = button.style.display == "none" ? "block" : "none";
});

.switch {
  opacity: 1;
}
.switch.hide {
  opacity: 0;
}
.hiddenonload {
  display: none;
}

<div class="switch">
  <button>
    <a>Hide me on click</a>
  </button>
</div>

<div class="hiddenonload">
  <p>Show me</p>
</div>

Hide one div and show another on click

My code

2 Answers2

Demo