javascript - How to hide the elements on the onload of a page in jQuery? -


following html code:

<div id="entrancelist">         <h2 class="heading">favourite questions</h2>         <table cellpadding="0" cellspacing="0" border="0" width="98%" style="padding:5px;" align="center">           <tbody>              <tr>               <td>                 <div class="sub_name" id="" >                   <div style="height:auto; overflow:hidden; width:100%;">                                <table cellpadding="5" cellspacing="0" border="0" width="100%" class="manage_box">                        <tr class="question_info">                         <td valign="top" width="70%">                           <b>question 4.</b></td>                           <td valign="top" align="left" width="30%">                           <b><a href ="#" style="margin-right:0px;" class="fav_que" id="93041">remove favourite question</a></b></td></tr>                           <tr class="question_info">                           <td valign="top" colspan="2">                           <br /><b>direction : </b><!doctype html public "-//w3c//dtd html 4.0 transitional//en" "http://www.w3.org/tr/rec-html40/loose.dtd">                            </td></tr>                           <tr class="question_info">                           <td valign="top">                            <b>question : </b>                                                     <br/><!doctype html public "-//w3c//dtd html 4.0 transitional//en" "http://www.w3.org/tr/rec-html40/loose.dtd"> <html><body><p>the angel between <img align="middle" class="wirisformula" src="http://localhost/eprime/entprm/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=527931a5749cffe312c126871736b88d.png"><br></p></body></html>                                                                             </td>                         <td valign="bottom" align="right"><b>que93041</b></td>                       </tr>                         <tr class="question_info">                                               <td valign="top" colspan="2">                           <a href="#" class="show-ans">show answers</a>                           </td>                         </tr>                        </td>                                           </tr>                                             <tr>                         <td colspan="2">                           <b>options : </b>                         </td>                       </tr>                                                                   <tr>                         <td class="options" colspan="2">                     1 .  90o                          </td>                       </tr>                                             <tr>                         <td class="options" colspan="2">                     2 .  between 0o , 180o                          </td>                       </tr>                                             <tr>                         <td class="options" colspan="2">                     3 .  180o                           </td>                       </tr>                                             <tr>                         <td class="options" colspan="2">                     4 .  none of these                          </td>                       </tr>                                             <tr>                         <td colspan="2">                           <b>correct answer :</b> 2                            </td>                       </tr>                                                     </table>                         </div>               </div>             </td>           </tr>          </tbody>       </table>       </div> 

here i'm showing questions, it's available options , correct answer. i'm hiding , showing available options , correct answers on click of hyperlink. code follows:

$(document).ready(function() { $(".show-ans").click(function(e) {     e.preventdefault();     if($(this).parent().parent().parent().children("tr:last").is(":visible")){         $(this).parent().parent().parent().children("tr:not(:first)").hide();         $(this).html("show answers");     } else {         $(this).parent().parent().parent().children("tr:not(:first)").show();         $(this).html("hide answers");     }   }); }); 

the above code working fine. issue when page loads these things should hidden questions , on click of hyperlink should hide if it's showing , should shown when hidden. can me in regard please? in advance.

hide them static css cannot seen when page loading. code adding event handler click event, but, until clicks on link, elements visible.


Comments

Popular posts from this blog

Android layout hidden on keyboard show -

google app engine - 403 Forbidden POST - Flask WTForms -

c - Why would PK11_GenerateRandom() return an error -8023? -