JavaScript Show/Hide DIV

Question

I have a form where the user choose if he/she is SINGLE CITIZENSHIP OR DUAL CITIZENSHIP.
If the user chooses SINGLE CITIZENSHIP the hidden div will not show up and if the user chooses DUAL CITIZENSHIP the hidden div will show below.

<div class="form-row">
  <div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">Filipino</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">Dual Citizenship</label>
</div>
</div>

<div id="hidden">
<div class="form-row">
  <div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">By birth</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">By Naturalize</label>
</div>
</div>
</div>

Unable to see `SINGLE CITIZENSHIP` in your HTML as well as please post your code efforts too (in the question itself). — Alive to die - Anant, Feb 10 '20 at 07:17
Does this answer your question? [Show/hide 'div' using JavaScript](https://stackoverflow.com/questions/21070101/show-hide-div-using-javascript) — Ashkan Pourghasem, Feb 10 '20 at 07:17

score 1 · Answer 1 · answered Feb 10 '20 at 07:54

let valeInpOne = document.getElementById('inlineCheckbox1'); 
let valeInpTwo = document.getElementById('inlineCheckbox2').value; 
let ele = document.getElementById("hidden");

if(valeInpOne == 'option1'){ ele.hidden = true }else if(valeInpTwo == 'option2'){ ele.hidden = false }

score -1 · Accepted Answer · edited Feb 13 '20 at 04:50

Use change() event of jQuery and show-hide div.

$(document).ready(function () {
    $('#inlineCheckbox2').change(function () {
        if (!this.checked)
           $('#hidden').fadeOut('slow');
        else 
            $('#hidden').fadeIn('slow');
    });
});

#hidden{
  display:none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row">
  <div class="form-check form-check-inline">
    <input
      class="form-check-input"
      type="checkbox"
      id="inlineCheckbox1"
      value="option1"
    />
    <label class="form-check-label" for="inlineCheckbox1">Filipino</label>
  </div>
  <div class="form-check form-check-inline">
    <input
      class="form-check-input"
      type="checkbox"
      id="inlineCheckbox2"
      value="option2"
    />
    <label class="form-check-label" for="inlineCheckbox2"
      >Dual Citizenship</label
    >
  </div>
</div>

<div id="hidden">
  <div class="form-row">
    <div class="form-check form-check-inline">
      <input
        class="form-check-input"
        type="checkbox"
        id="inlineCheckbox1"
        value="option1"
      />
      <label class="form-check-label" for="inlineCheckbox1">By birth</label>
    </div>
    <div class="form-check form-check-inline">
      <input
        class="form-check-input"
        type="checkbox"
        id="inlineCheckbox2"
        value="option2"
      />
      <label class="form-check-label" for="inlineCheckbox2"
        >By Naturalize</label
      >
    </div>
  </div>
</div>

Refer: https://stackoverflow.com/a/19447642/10971575

@kiinken what happened if someone clicked `Dual Citizenship` and then clicked on `single citizenship`? this code will not worked — Alive to die - Anant, Feb 10 '20 at 08:01
@kiinken check this:- https://jsfiddle.net/e1yLopjz/1/ (click on second checkbox and then click on first checkbox) — Alive to die - Anant, Feb 10 '20 at 08:07

JavaScript Show/Hide DIV

2 Answers2