How to show a div when I click on a button

red light 0
Viewed 32

const targetDiv = document.getElementById("weging");
const btn = document.getElementById("toggle");

btn.onclick = function() {
  if (targetDiv.style.display !== "none") {
    targetDiv.style.display = "none";
  } else {
    targetDiv.style.display = "block";
  }
}
#cijfers {
  display: none;
}
<div id="weging">
  <p>Hello</p>
</div>
<button type="button" id="toggle">Volgende</button>
<div id="cijfers">
  <p>Hello2</p>
</div>

Hello guys, I have this litte part in my website. When I press the button I want to hide div 'weging' and show div 'cijfers'. The div 'weging' hides perfectly with this JS code, but how can I show the div 'cijfers'. If anyone can help me out I would appreciate it a lot!

javascript css html
5 Answers

function showDiv() {
   document.getElementById('welcomeDiv').style.display = "block";
}
<div id="welcomeDiv"  style="display:none;" class="answer_list" > WELCOME</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />

Kj_music Lover0

This should answer your question when the user clicks on the button it will change the div style to display block

function showDiv() {
   document.getElementById('divContent').style.display = "block";
}
<div id="divContent"  style="display:none;" class="answer_list" > Some content</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />

Rahim0

If you need to show and hide the divs at the same time, you can do something like this

const wegingDiv = document.getElementById("weging");
const cijfersDiv=document.getElementById("cijfers");
const btn = document.getElementById("toggle");

const toogableDisplays=()=>{
 if (wegingDiv.style.display !== "none") {
    wegingDiv.style.display = "none";
    cijfersDiv.style.display="block";
  } else {
    wegingDiv.style.display = "block";
    cijfersDiv.style.display="none";
  }
}

btn.onclick = toogableDisplays();
//Styles
#cijfers {
  display: none;
}
//HTML
<div id="weging">
  <p>Hello</p>
</div>
<button type="button" id="toggle">Volgende</button>
<div id="cijfers">
  <p>Hello2</p>
</div>
Gilberto Santamaría0

It maybe easier to use CSS and a "hidden" class. Apply the class to cijfers initially, and then when the button is clicked toggle the class on both divs (using classList and toggle) so that class is removed from cijfers, and added to weging. Clicking the button again would do the opposite.

// Cache all the elements
const weging = document.getElementById('weging');
const cijfers = document.getElementById('cijfers');
const btn = document.getElementById('toggle');

// A more modern way of adding an event listener
// to an element
btn.addEventListener('click', handleClick);

// Put the elements into an array, and then iterate
// over each toggling the "hidden" class on/off
function handleClick() {
  [weging, cijfers].forEach(div => {
    div.classList.toggle('hidden');
  });
}
.hidden { display: none; }
<button type="button" id="toggle">Volgende</button>
<div id="weging"><p>Hello</p></div>
<div id="cijfers" class="hidden"><p>Hello2</p></div>

userkfM50

If you want this to happen at the touch of a button, then you can do something like this:

const targetDiv = document.getElementById("weging");
const btn = document.getElementById("toggle");
const cij = document.getElementById("cijfers");

btn.onclick = function() {
  if (targetDiv.style.display !== "none") {
    targetDiv.style.display = "none";
    cij.style.display = "block";
  } else {
    targetDiv.style.display = "block";
    cij.style.display = "none";
  }
}
SwaD0
Related