How do you show/hide a div with Javascript?

Question

I'm trying to use javascript to show/hide a div's content depending on which radio button is selected. I have an onchange function that I use to change the the div content from one div to another, but it doesn't work. If you can do this in jquery instead thats ok but im not that familiar with jquery so if you could update my jsfiddle with it I would be appreciativw :) Here is the JSFiddle: https://jsfiddle.net/markusbond/au77Ladg/ Any help is appreciated :)

JAVASCRIPT:

    function changeSelection() {

        if (document.getElementById("selectionTables").checked) {
            document.getElementById("populateCheckBoxes").show;
            document.getElementById("unpopulateCheckBoxes").hidden;
        } else {
            document.getElementById("unpopulateCheckBoxes").show;
            document.getElementById("populateCheckBoxes").hidden;
        }
    }

HTML:

<form role="form">
  <div class="row">
    <!--this is the onchange call-->
    <div class="radio col-xs-2" id="populateSelection" onchange="changeSelection()">
      <!--this is the first radio button-->
      <label>
        <input type="radio" name="optradio" id="selectionTables" />Use Tables
      </label>&nbsp;&nbsp;
      <!--this is the second radio button-->
      <label>
        <input type="radio" name="optradio" id="selectionViews" />Use Views
      </label>
    </div>
    <!--this is the first changed div-->
  </div>
  <div class="row" id="populateCheckBoxes">
    <div class="checkbox">
      <label>
        <input type="checkbox" id="selectionCondition" />Condition
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox" id="selectionDistribution" />Distribution
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox" id="selectionProgram" />Program
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox" id="selectionTreatment" />Treatment
      </label>
    </div>
  </div>
  <!--this is the second changed div-->
  <div class="row" id="unpopulateCheckBoxes"></div>
</form>

Answer 1

This is the correct way

  <script>
   function changeSelection() {

       if (document.getElementById("selectionTables").checked) {
          document.getElementById("populateCheckBoxes").style.visibility = "hidden";
        document.getElementById("unpopulateCheckBoxes").style.visibility = "visible";
      } else {
        document.getElementById("unpopulateCheckBoxes").style.visibility ="hidden";
        document.getElementById("populateCheckBoxes").style.visibility = "visible";
      }
  }
 </script>

You are using

document.getElementById("unpopulateCheckBoxes").hidden;

but you should

document.getElementById("populateCheckBoxes").style.visibility = "hidden";

Hope this helps

Answer 2

document.getElementById('myElementID').style.display = 'none'; // Will hide an element
document.getElementById('myElementID').style.display = 'block'; // Will show an element

It is worth noting that you will not always want your element to be display:block;. There are many display options and you probably want to toggle back and forth based on how your element was originally shown.

Answer 3

or via jquery, thats what i would prefer:

function changeSelection() {

    if ($("#selectionTables").attr("checked") {
        $("#populateCheckBoxes").show();
        $("#unpopulateCheckBoxes").hide();
    } else {
        $("#unpopulateCheckBoxes").show();
        $("#populateCheckBoxes").hide();
    }
}

Answer 4

Problem is html does not supports show/hide attribute. Try using style attribute with display property. Also use checked attribute to make default radio selection.

<input type="radio" name="optradio" id="selectionTables" checked='' />

function changeSelection() {
  var pop = "none",
    upop = "block";
  if (document.getElementById("selectionTables").checked) {
    pop = "block";
    upop = "none";
  }
  document.getElementById("unpopulateCheckBoxes").style.display = upop;
  document.getElementById("populateCheckBoxes").style.display = pop;
}

<form role="form">
  <div class="row">
    <!--this is the onchange call-->
    <div class="radio col-xs-2" id="populateSelection" onchange="changeSelection()">
      <!--this is the first radio button-->
      <label>
        <input type="radio" name="optradio" id="selectionTables" checked='' />Use Tables
      </label>&nbsp;&nbsp;
      <!--this is the second radio button-->
      <label>
        <input type="radio" name="optradio" id="selectionViews" />Use Views
      </label>
    </div>
    <!--this is the first changed div-->
  </div>
  <div class="row" id="populateCheckBoxes">
    <div class="checkbox">
      <label>
        <input type="checkbox" id="selectionCondition" />Condition
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox" id="selectionDistribution" />Distribution
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox" id="selectionProgram" />Program
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox" id="selectionTreatment" />Treatment
      </label>
    </div>
  </div>
  <!--this is the second changed div-->
  <div class="row" id="unpopulateCheckBoxes"></div>
</form>

Answer 5

Example using JQuery FIDDLE

JavaScript

$('input:radio[name=optradio]').change(
function(){
       if (this.value == 'selectionTables') {
        $("#unpopulateCheckBoxes" ).hide();
        $("#populateCheckBoxes").show();
    }
    else {
        $("#unpopulateCheckBoxes" ).show();
        $("#populateCheckBoxes").hide();
    }
}
); 

Give your first radio button a value value="selectionTables"

<!--this is the first radio button-->
<label>
    <input type="radio" name="optradio" id="selectionTables" value="selectionTables" />Use Tables
</label>

I hope I understood you correctly.