How to hide and show div base on using click input

Question

Here I have to hide the div id #second_area while I click the input. The ID name is #employee_id

<form id="search_form" name="search_form" method="get" action="" >

        <table width="98%" id="performance_tbl" align="center">

          <div id="first_row">  
          <tr class="first_tr">
            <th scope="row"><label for="employee_id">Employee ID: </label></th>
            <td><input type="text" name="employee_id" id="employee_id" /></td>
          </tr>
          </div>

          <tr>
            <td>&nbsp;</td>
          </tr>

          <div id="second_area">
           <tr>
            <th scope="row"><label for="company_id">Company Name:</label></th>
            <td><input type="text" name="company_id" id="company_id" /></td>
            <th><label for="department_id">Department Name: </label></th>
            <td><input type="text" name="department_id" id="department_id" /></td>
          </tr>

          <tr>
            <th scope="row"><label for="current_year">Select Year: </label></th>
            <td><input type="number" name="current_year" id="current_year" /></td>
            <th><label for="compare_year">Compare Year: </label></th>
            <td><input type="number" name="compare_year" id="compare_year" /></td>
          </tr>

          <tr>
            <th scope="row"><label for="month_from">Month From: </label></th>
            <td><input type="number" name="month_from" id="month_from" /></td>
            <th><label for="month_to">Month To: </label></th>
            <td><input type="number" name="month_to" id="month_to" /></td>
          </tr>

          <tr>
            <th scope="row"><label for="srch_gender">Select Gender: </label></th>
          <td>
                <table>
                <tr>
                    <td><input type="radio" name="gender" id="female" value="0">FeMale</td>
                    <td><input type="radio" name="gender" id="male" value="1">Male</td>
                </tr>
                </table>
            </td>
          </tr>
          </div>
          <tr>
            <td>&nbsp;</td>
            <td colspan="2"><input type="submit" name="search_kpi" id="search_kpi" value="Search Now"></td>
          </tr>
    </table>
</form>

Here is my jQuery code. How can I run the code? Please give me suggestion how to show again my #second_area div if I release my cursor from the #first_area id div input

$(document).ready(function() {
    $('#employee_id').focus(function() {
        $('#second_area').hide();
    });
});

Answer 1

It is because, you can't insert <div> inside a table.

You can try another way to achieve your requirement,

Remove all <div> tags inside your table.

Add classes to each of your <tr> which were inside your <div id="#second_area">

So, your final code should be look like this,

<form id="search_form" name="search_form" method="get" action="">
        <table width="98%" id="performance_tbl" align="center">
            <tr class="first_tr">
                <th scope="row"><label for="employee_id">Employee ID: </label></th>
                <td><input type="text" name="employee_id" id="employee_id" /></td>
            </tr>
            <tr>


                <td>&nbsp;</td>
            </tr>
            <!-- added class 'second_area'-->
            <tr class="second_area">
                <th scope="row"><label for="company_id">Company Name:</label></th>
                <td><input type="text" name="company_id" id="company_id" /></td>
                <th><label for="department_id">Department Name: </label></th>
                <td><input type="text" name="department_id" id="department_id" /></td>
            </tr>
            <!-- added class 'second_area'-->
            <tr class="second_area">
                <th scope="row"><label for="current_year">Select Year: </label></th>
                <td><input type="number" name="current_year" id="current_year" /></td>
                <th><label for="compare_year">Compare Year: </label></th>
                <td><input type="number" name="compare_year" id="compare_year" /></td>
            </tr>
            <!-- added class 'second_area'-->
            <tr class="second_area">
                <th scope="row"><label for="month_from">Month From: </label></th>
                <td><input type="number" name="month_from" id="month_from" /></td>
                <th><label for="month_to">Month To: </label></th>
                <td><input type="number" name="month_to" id="month_to" /></td>
            </tr>
            <!-- added class 'second_area'-->
            <tr class="second_area">
                <th scope="row"><label for="srch_gender">Select Gender: </label></th>
                <td>
                    <table>
                        <tr>
                            <td><input type="radio" name="gender" id="female" value="0">FeMale</td>
                            <td><input type="radio" name="gender" id="male" value="1">Male</td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td colspan="2"><input type="submit" name="search_kpi" id="search_kpi" value="Search Now"></td>
            </tr>
        </table>
    </form>

And your javascript should be changed like this,

        $(document).ready(function () {
            $('#employee_id').focus(function () {
                $('.second_area').hide();
            });
        });

Answer 2

A div element is not a valid child element of a table element. One way to achieve your goal may be to give all the rows you want to toggle() a common class, say second_area, and target them with that class. Use both focusin and focusout events like so:

$(document).ready(function() {
    $('#employee_id').on('focusin focusout', function() {
        $('.second_area').toggle();
    });
});

$(document).ready(function() {
    $('#employee_id').on('focusin focusout', function() {
        $('.second_area').toggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="search_form" name="search_form" method="get" action="" >

        <table width="98%" id="performance_tbl" align="center">

          <div id="first_row">  
          <tr class="first_tr">
            <th scope="row"><label for="employee_id">Employee ID: </label></th>
            <td><input type="text" name="employee_id" id="employee_id" /></td>
          </tr>
          </div>

          <tr>
            <td>&nbsp;</td>
          </tr>

           <tr class="second_area">
            <th scope="row"><label for="company_id">Company Name:</label></th>
            <td><input type="text" name="company_id" id="company_id" /></td>
            <th><label for="department_id">Department Name: </label></th>
            <td><input type="text" name="department_id" id="department_id" /></td>
          </tr>

          <tr class="second_area">
            <th scope="row"><label for="current_year">Select Year: </label></th>
            <td><input type="number" name="current_year" id="current_year" /></td>
            <th><label for="compare_year">Compare Year: </label></th>
            <td><input type="number" name="compare_year" id="compare_year" /></td>
          </tr>

          <tr class="second_area">
            <th scope="row"><label for="month_from">Month From: </label></th>
            <td><input type="number" name="month_from" id="month_from" /></td>
            <th><label for="month_to">Month To: </label></th>
            <td><input type="number" name="month_to" id="month_to" /></td>
          </tr>

          <tr class="second_area">
            <th scope="row"><label for="srch_gender">Select Gender: </label></th>
          <td>
                <table>
                <tr>
                    <td><input type="radio" name="gender" id="female" value="0">FeMale</td>
                    <td><input type="radio" name="gender" id="male" value="1">Male</td>
                </tr>
                </table>
            </td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td colspan="2"><input type="submit" name="search_kpi" id="search_kpi" value="Search Now"></td>
          </tr>
    </table>
</form>

Answer 3

You are halfway there. If you want to hide the #second_area during the text input's focus, and then show it when the focus leaves you also need to use blur ^{jQuery API}

$(function() {
    var second = $("#second_area");
    $('#employee_id').focus(function() {
        second.hide();
    }).blur(function(){ // event for when focus is lost
        second.show();
    });
});