how to show and hide field based on radio button

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();   
}
});
});