how to show and hide field based on radio button - php

Question

i have a radio button question that have yes or no answers . i need to show and hide the next fields depend on the radio button answer , if yes show the field if no keep them hide .
here is my code
<?php
if(form_error('HSC'))
echo "<div class='form-group has-error' >";
else
echo "<div class='form-group' >";
?>
<label for="HSC" class="col-sm-2 control-label">
<?=$this->lang->line("student_have_hs")?>
</label>
<div class="col-sm-3">
<input type="radio" name="HSC" value="Yes">Yes<br> <input type="radio" name="HSC" value="No"> No<br>
</div>
<span class="col-sm-4 control-label">
<?php echo form_error('HSC'); ?>
</span>
</div>
<?php
if(form_error('student_date_of_graduate'))
echo "<div class='form-group has-error' >";
else
echo "<div class='form-group' >";
?>
<label for="student_date_of_graduate" class="col-sm-2 control-label">
<?=$this->lang->line("student_date_of_graduate")?>
</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="student_date_of_graduate" name="student_date_of_graduate" value="<?=set_value('student_date_of_graduate')?>" >
</div>
<span class="col-sm-4 control-label">
<?php echo form_error('student_date_of_graduate'); ?>
</span>
</div>
<?php
if(form_error('schoolname'))
echo "<div class='form-group has-error' >";
else
echo "<div class='form-group' >";
?>
<label for="name_id" class="col-sm-2 control-label">
<?=$this->lang->line("student_schoolname")?>
</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="schoolname" name="schoolname" value="<?=set_value('schoolname')?>" >
</div>
<span class="col-sm-4 control-label">
<?php echo form_error('schoolname'); ?>
</span>
</div>
<?php
if(form_error('specialty'))
echo "<div class='form-group has-error' >";
else
echo "<div class='form-group' >";
?>
<label for="specialty" class="col-sm-2 control-label">
<?=$this->lang->line("student_specialty")?>
</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="specialty" name="specialty" value="<?=set_value('specialty')?>" >
</div>
<span class="col-sm-4 control-label">
<?php echo form_error('specialty'); ?>
</span>
</div>
<?php
if(form_error('average'))
echo "<div class='form-group has-error' >";
else
echo "<div class='form-group' >";
?>
<label for="average" class="col-sm-2 control-label">
<?=$this->lang->line("student_average")?>
</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="average" name="average" value="<?=set_value('average')?>" >
</div>
<span class="col-sm-4 control-label">
<?php echo form_error('average'); ?>
</span>
</div>
any one can help please because i dont have too many experience with javascript

Answer 1

Here is basic example by using javascript:
Radio Buttons:
<input type="radio" name="HSC" value="Yes" onChange="getValue(this)">Yes<br>
<input type="radio" name="HSC" value="No" onChange="getValue(this)"> No<br>
Here, i am using onchange() event for value changes.
Your Div:
<div id="yourfield" style="display:none;">
Hide Me: Place your all four fields here
student_date_of_graduate ,
average ,
schoolname and
specialty
</div>
You need a identifier id="yourfield" for perform changes like show and hide the specific div.
Script:
<script type="text/javascript">
function getValue(x) {
if(x.value == 'No'){
document.getElementById("yourfield").style.display = 'none'; // you need a identifier for changes
}
else{
document.getElementById("yourfield").style.display = 'block'; // you need a identifier for changes
}
}
</script>
Simple javascript function, which only use to show or hide your div according to radio button value.

Answer 2

Use jQuery :
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if($(this).attr('id') == 'your input id') {
$('#div id').show();
}
else {
$('#div id').hide();
}
});
});