correct way of hiding HTML content

Question

Hi all,

I am writing a small HTML+JavaScript (so to call) application. User is given two choices (radio buttons) and depending what did he choose, I display content "A" or content "B" under the choice radio buttons.

Now I am wondering what is a right way to handle this content. Should I have 2 DIVs, only one visible, depending on choice, or should I use JavaScript to write InnerHTML to single div, depending on a state of radio buttons. This is small "calculation" application, so no forms data will be submitted.

Thanks for replies! J

Answer 1

Use two divs, both belonging to a CSS class that includes the display: none rule. Then when the user selects a choice, override that CSS on the div you want displayed and undo the override on what you do not want to show. For example, if the user selects choice 1:

div1.style.display = 'block';
div2.style.display = '';

Answer 2

It's better to have 2 div and display the one which needs to be displayed. Dynamically writing the content makes it too hard to design it and brings no real value.

Answer 3

Use the 2 divs. Embeding HTML into Javascript is ugly and makes it difficult to layout you page.

Answer 4

Use both divs and then use display: none; for the div to hide.

Answer 5

You can use:

.myDivHidden
{
   display: none;
}

.myDiv
{
   display: block;
}

<div id="myDiv">
   Content
</div>

or

.myDivInvisible
{
   visibility: hidden;
}
.myDivVisible
{
   visibility: visible;
}

<div id="myDiv">
   Content
</div>

The difference is that display: none; will cause the element to disappear from the visible screen as if it is not even there, whereas visibility: hidden; will cause the element to disappear from view but still take up the space and other elements will not shift into the empty space like they would is you use display: none;.

Then you can swap the styles using JavaScript:

if (radio button check goes here)
{
   document.getElementById('myDiv').className = className; // display or visibility
}
else
{
   document.getElementById('myDiv').className = className; // display or visibility
}

Just swap the visibility classes according to the method you would prefer to use