CODEWITHSUNDEEP
jqueryhtml
Maheer Ali
Maheer Ali

Reputation: 11

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

I made a toggle button with jquery. I opened that page, first I see all the content visible. When I clicked on button then it hides. I want to make first hide and when click on button then show.

https://i.sstatic.net/6VELb.jpg

First image is before click second is 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 anyone help ?

Upvotes: 0

Views: 1371

Answers (2)

Satpal
Satpal

Reputation: 133423

You can hide them by using a simple CSS rule.

CSS Recommended

.asia{
    display:none;
}

Or, hide them using jQuery

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


$(document).ready(function() {
  $("#pak").click(function() {
    $(".asia").toggle(700);
  });
});
.asia {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>

Upvotes: 0

Pranav C Balan
Pranav C Balan

Reputation: 115242

Add style display:none to the element or for the class, it will 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>

Upvotes: 1

Related Questions