All geek questions in one place

How to hide and show a div base with a click

Here I need to hide the div id #second_area while I click on the input. #employee_id name #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 a suggestion on how to show my div #second_area again if I pull my cursor out of the input

 $(document).ready(function() { $('#employee_id').focus(function() { $('#second_area').hide(); }); });
+5
source share
3 answers

This is because you cannot insert a <div> inside a table.

You can try another way to reach your requirement,

Remove all <div> tags inside your table.

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

So your final code should 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 modified as follows:

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

You're halfway there. If you want to hide #second_area during the text input focus, and then show it when the focus goes away, you will also need to use the jQuery API blur

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

A div not a valid child of a table element. One way to achieve your goal could be to provide all the lines you want toggle() for a general class like second_area , and target them to that class. Use both focusin and focusout :

 $(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>
+1
source

Source: https://habr.com/ru/post/1232768/

More articles:


All Articles