html - How to hide content first in Toggle(hide/show) button with jquery -

i made toggle button jquery. opened page, first see content visible. when clicked on button hides. want make first hide , when click on button show.

http://imgur.com/a/yxrog

first image before click second after click

html

 <button id="pak">asia</button> <div class="asia">  <ul>   <li><a href="file:///c:/documents%20and%20settings/maheer/desktop/cities/aisa.html">&nbsp;&nbsp;&nbsp;&nbsp;<font size="4">list of cities in asia</font></a></li>   <li><a href="file:///c:/documents%20and%20settings/maheer/desktop/cities/shag.html">&nbsp;&nbsp;&nbsp;&nbsp;shanghai</a></li>   <li><a href="file:///c:/documents%20and%20settings/maheer/desktop/cities/toky.html">&nbsp;&nbsp;&nbsp;&nbsp;tokyo</a></li>   <li><a href="file:///c:/documents%20and%20settings/maheer/desktop/cities/kara.html">&nbsp;&nbsp;&nbsp;&nbsp;karachi</a></li>   <li><a href="file:///c:/documents%20and%20settings/maheer/desktop/cities/dehl.html">&nbsp;&nbsp;&nbsp;&nbsp;dehli</a></li>   <li><a href="file:///c:/documents%20and%20settings/maheer/desktop/cities/mumb.html">&nbsp;&nbsp;&nbsp;&nbsp;mumbai</a></li>   <li><a href="file:///c:/documents%20and%20settings/maheer/desktop/cities/beij.html">&nbsp;&nbsp;&nbsp;&nbsp;beijing</a></li>   <li><a href="file:///c:/documents%20and%20settings/maheer/desktop/cities/seou.html">&nbsp;&nbsp;&nbsp;&nbsp;seoul</a></li>   <li><a href="file:///c:/documents%20and%20settings/maheer/desktop/cities/hong.html">&nbsp;&nbsp;&nbsp;&nbsp;hong kong</a></li>    <li><a href="file:///c:/documents%20and%20settings/maheer/desktop/cities/gaun.html">&nbsp;&nbsp;&nbsp;&nbsp;gaungzhou</a></li>   <li><a href="file:///c:/documents%20and%20settings/maheer/desktop/cities/uzbe.html">&nbsp;&nbsp;&nbsp;&nbsp;uzbekestian</a></li>   <li><a href="file:///c:/documents%20and%20settings/maheer/desktop/cities/tehr.html">&nbsp;&nbsp;&nbsp;&nbsp;tehran</a></li>   <li><a href="file:///c:/documents%20and%20settings/maheer/desktop/cities/laho.html">&nbsp;&nbsp;&nbsp;&nbsp;lahore</a></li>   <li><a href="file:///c:/documents%20and%20settings/maheer/desktop/cities/riya.html">&nbsp;&nbsp;&nbsp;&nbsp;riyadh</a></li>   <li><a href="file:///c:/documents%20and%20settings/maheer/desktop/cities/jedd.html">&nbsp;&nbsp;&nbsp;&nbsp;jeddah</a></li>   <li><a href="file:///c:/documents%20and%20settings/maheer/desktop/cities/jakt.html">&nbsp;&nbsp;&nbsp;&nbsp;jaktara</a></li>   <li><a href="file:///c:/documents%20and%20settings/maheer/desktop/cities/osak.html">&nbsp;&nbsp;&nbsp;&nbsp;osaka</a></li>   <li><a href="file:///c:/documents%20and%20settings/maheer/desktop/cities/tian.html">&nbsp;&nbsp;&nbsp;&nbsp;tianjin</a></li> </ul> </div> 

javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(document).ready(function(){     $("#pak").click(function(){         $(".asia").toggle(700);     }); }); </script> 

can ?

add style display:none element or class, hide element on page load

$(document).ready(function() {    $("#pak").click(function() {      $(".asia").toggle(700);    });  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <button id="pak">asia</button>  <div class="asia" style="display:none">    <ul>      <li><a href="file:///c:/documents%20and%20settings/maheer/desktop/cities/aisa.html">&nbsp;&nbsp;&nbsp;&nbsp;<font size="4">list of cities in asia</font></a>      </li>      <li><a href="file:///c:/documents%20and%20settings/maheer/desktop/cities/shag.html">&nbsp;&nbsp;&nbsp;&nbsp;shanghai</a>      </li>      <li><a href="file:///c:/documents%20and%20settings/maheer/desktop/cities/toky.html">&nbsp;&nbsp;&nbsp;&nbsp;tokyo</a>      </li>      <li><a href="file:///c:/documents%20and%20settings/maheer/desktop/cities/kara.html">&nbsp;&nbsp;&nbsp;&nbsp;karachi</a>      </li>      <li><a href="file:///c:/documents%20and%20settings/maheer/desktop/cities/dehl.html">&nbsp;&nbsp;&nbsp;&nbsp;dehli</a>      </li>      <li><a href="file:///c:/documents%20and%20settings/maheer/desktop/cities/mumb.html">&nbsp;&nbsp;&nbsp;&nbsp;mumbai</a>      </li>      <li><a href="file:///c:/documents%20and%20settings/maheer/desktop/cities/beij.html">&nbsp;&nbsp;&nbsp;&nbsp;beijing</a>      </li>      <li><a href="file:///c:/documents%20and%20settings/maheer/desktop/cities/seou.html">&nbsp;&nbsp;&nbsp;&nbsp;seoul</a>      </li>      <li><a href="file:///c:/documents%20and%20settings/maheer/desktop/cities/hong.html">&nbsp;&nbsp;&nbsp;&nbsp;hong kong</a>      </li>      <li><a href="file:///c:/documents%20and%20settings/maheer/desktop/cities/gaun.html">&nbsp;&nbsp;&nbsp;&nbsp;gaungzhou</a>      </li>      <li><a href="file:///c:/documents%20and%20settings/maheer/desktop/cities/uzbe.html">&nbsp;&nbsp;&nbsp;&nbsp;uzbekestian</a>      </li>      <li><a href="file:///c:/documents%20and%20settings/maheer/desktop/cities/tehr.html">&nbsp;&nbsp;&nbsp;&nbsp;tehran</a>      </li>      <li><a href="file:///c:/documents%20and%20settings/maheer/desktop/cities/laho.html">&nbsp;&nbsp;&nbsp;&nbsp;lahore</a>      </li>      <li><a href="file:///c:/documents%20and%20settings/maheer/desktop/cities/riya.html">&nbsp;&nbsp;&nbsp;&nbsp;riyadh</a>      </li>      <li><a href="file:///c:/documents%20and%20settings/maheer/desktop/cities/jedd.html">&nbsp;&nbsp;&nbsp;&nbsp;jeddah</a>      </li>      <li><a href="file:///c:/documents%20and%20settings/maheer/desktop/cities/jakt.html">&nbsp;&nbsp;&nbsp;&nbsp;jaktara</a>      </li>      <li><a href="file:///c:/documents%20and%20settings/maheer/desktop/cities/osak.html">&nbsp;&nbsp;&nbsp;&nbsp;osaka</a>      </li>      <li><a href="file:///c:/documents%20and%20settings/maheer/desktop/cities/tian.html">&nbsp;&nbsp;&nbsp;&nbsp;tianjin</a>      </li>    </ul>  </div>