how to hide and show div from javascript using jquery
<pre><code>        &lt;script type="text/javascript"&gt;
            function toggleDiv()
            {
                if (document.getElementById("searchByRegn_ChkBox").checked)
                {
                        $("#showHideDiv2").show();
                          $('#showHideDiv').hide();
                }
                else
                {
                 $('#showHideDiv2').hide();
                   $('#showHideDiv').show();

                }
            }

        &lt;/script&gt;


&lt;tr class="TextDarkBlueBOLD"&gt;
                        &lt;td  width="20%" align="left"&gt;
                            &lt;input type="checkbox"  id="searchByRegn_ChkBox" checked onclick="toggleDiv(); "/&gt;
                            Custom Search
                        &lt;/td&gt;
                        &lt;td valign="top"&gt;

                        &lt;/td&gt;
&lt;/tr&gt;
                  &lt;div id="showHideDiv"&gt;   &lt;tr class="TextDarkBlueBOLD"&gt;
                        &lt;td  width="20%"&gt;
                           Regn. No :
                        &lt;/td&gt;
                        &lt;td  align="left"&gt;
                            &lt;input type="text" id="rNo" name="regPreSerailNumber" size="15" maxlength="50" onkeypress="return numbersonly(this, event)"&gt;
                        &lt;/td&gt;
                    &lt;/tr&gt;&lt;/div&gt;
                    &lt;div id="showHideDiv2"&gt;
                            &lt;tr&gt;
                              &lt;td class=PageHeader14 colspan="2" align="center"&gt;Enrolment Search&lt;/td&gt;
                            &lt;/tr&gt;
                   &lt;/div&gt;
</code></pre>

<p>When check box will be checked then I want to hide div showHideDiv and show div showHideDiv2 and if unchecked then  I want to show div showHideDiv and hide div showHideDiv2. But its not working</p>
