How To Change Div Display CSS From None To Block On Button click

Question

I am trying to make some quiz lander. And I want to change div cs from display: None to Display: block on click of a button.

I am trying it using JS but I am not able to.

example: I have questions and two buttons per question (Yes and No) So if you click on any button (either yes or no), then Div 2 must change its CSS from display: none to display: Block and So On For other questions.

Hope You Are Getting it.

Here is the link to tet post I am trying to do

https://us.healthshul.com/test-post/

Guys need some help.

Possible duplicate of [jquery change style of a div on click](https://stackoverflow.com/questions/6096739/jquery-change-style-of-a-div-on-click) — MattHamer5, Oct 22 '19 at 12:54
Please go read [ask]. We expect you to put in an actual reasonable effort, before you come asking here. In this case, you should have done some proper research (everything but a new or unique topic, this), then showed us what you tried ([mre]), and explained where exactly the problem lies. Please do that the next time you ask here. — 04FS, Oct 22 '19 at 12:57
Start looking on the web for how to select elements in JavaScript, how to change CSS properties in JS and how to handle click events. — Akshit Mehra, Oct 22 '19 at 13:02

score 0 · Answer 1 · answered Oct 22 '19 at 12:59

lets say you have this button and text:

<div id="foo">hello world!</div>
<button id="switch" />Click me</button>

use this code to change the css:

$('#switch').click(function() {
    $('#foo').css({
        'display': 'Block'
    });
});

this way when you click switch the style display will change from None to Block

score 0 · Answer 2 · answered Oct 22 '19 at 15:13

Load all your questions at once. Position them in the same place and use position:absolute to allow them to overlap. Give them ID values that increase by 1 each question.

The JavaScript I've written sets a variable that corresponds with the question numbers (which are also the question IDs). The function executes when the user clicks an answer. It retrieves the current question's ID, sets its display to none (revealing the next question), then adds one to the ID variable's value.

Here is the code:

var num = 1;

function display() {
  document.getElementById(num).style.display = "none";
  num += 1;
}

.button {
  padding: 10px 20px;
  border: 1px solid black;
}

.button:hover {
  cursor: pointer;
}

.question {
  width: 250px;
  height: 100px;
  background-color: gray;
  display: block;
  position: absolute;
}

<div class="question" id="4">
  <span class="text">Question4 Question4 Question4 Question4 Question4 Question4</span>
  <button class="button" onClick="display();">Answer 1</button>
  <button class="button" onClick="display();">Answer 2</button>
</div>
<div class="question" id="3">
  <span class="text">Question3 Question3 Question3 Question3 Question3 Question3</span>
  <button class="button" onClick="display();">Answer 1</button>
  <button class="button" onClick="display();">Answer 2</button>
</div>
<div class="question" id="2">
  <span class="text">Question2 Question2 Question2 Question2 Question2 Question2</span>
  <button class="button" onClick="display();">Answer 1</button>
  <button class="button" onClick="display();">Answer 2</button>
</div>
<div class="question" id="1">
  <span class="text">Question Question Question Question Question Question Question</span>
  <button class="button" onClick="display();">Answer 1</button>
  <button class="button" onClick="display();">Answer 2</button>
</div>

How To Change Div Display CSS From None To Block On Button click

2 Answers2