how to show and hide divs based on radio button click?

Question

I am trying to do show and hide div base on radio button click but it can not work perfect. I am currently using javascript function to control the content display.

This is javascript code :

function udatabase() {
    document.getElementById('ifCSV').style.display = "none";
}
function ucsv() {
    document.getElementById('ifCSV').style.display = "block";
}

This is my radio button:

<input type="radio" name="data" onclick="udatabase()" id="udatabase"> Database
  <input type="radio" name="data" onclick="ucsv()" id="ucsv"> CSV <br/>
  <div id="ifCSV" style="display:none">
    <input name="csv" type="file" id="csv" accept=".csv" required/> <br/>
</div>

After click on csv, there is no response in html page.

Answer 1

Your javascript onclick function name cannot same with your id name inside input text. You should change one of the name.

Your html code here:

  <input type="radio" name="data" onclick="udatabase()" id="udatabase"> Database
  <input type="radio" name="data" onclick="ucsv()" id="ucsv"> CSV <br/>

After edited

  <input type="radio" name="data" onclick="udatabase()" id="tdatabase"> Database
  <input type="radio" name="data" onclick="ucsv()" id="tcsv"> CSV <br/>

This should be work properly after you change the name.