How to show a div when I click on a button-CodePudding

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!

CodePudding user response：

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;"  > Some content</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />

CodePudding user response：

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>

CodePudding user response：

function showDiv() {
   document.getElementById('welcomeDiv').style.display = "block";
}

<div id="welcomeDiv"  style="display:none;"  > WELCOME</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />

CodePudding user response：

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

CodePudding user response：

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" ><p>Hello2</p></div>