Question

I’m trying to show or hide divs based on user settings in a Windows 8 app. I have 2 divs in my html file:

<div id="fillBlank"><p>Fill in the Blank area</p></div>
<div id="multipleChoice"><p>Multiple choice area</p></div>

In the JavaScript file I have:

var answerStyle = "mc";

function showArea() {
    if (answerStyle == "mc") {
        // Multiple choice
        multipleChoice.visible = true;
        fillBlank.visible = false;
    } else if (answerStyle == "fb") {
        // Fill in the blank
        multipleChoice.visible = false;
        fillBlank.visible = true;
    }
}

This doesn’t work. Any suggestions? Thanks in advance.

Answer 1

One way to do this in JavaScript is to use the style property:

var fillBlank = document.getElementById("fillBlank");    
fillBlank.style.display = "none";

Setting style.display to “” will make it visible using what ever the display time the element currently has set.