Question

I apologize for the noob question but I really can’t find the solution to this.

I’ve got a link that when clicked toggle’s a ul.

$("#pastShows").click(function () {
$(".shows").toggle("slow");
});​

<h3 id="pastShows"><a href="javascript:void(0)">Past</a></h3>
<div class="shows">
  <ul>
    <li>Show 1</li>
    <li>Show 2</li>
    <li>Show 3</li>
    <li>Show 4</li>
  </ul>
</div>​

It works perfect in this fiddler. http://jsfiddle.net/Chadimoglou/NG8Dj/2/

But I can’t get it to work when implemented here http://www.kiirstinmarilyn.com/#shows

Thank you kindly for the help.

Answer 1

Ok, the issue here’s you are using window.onload, in place of the document.ready() or $(function() {}. jQuery’s document.ready() method gets called as soon as DOM is ready (means browser has parsed the HTML and built the DOM tree). If your web page has large images, it will not wait for loading of images completely. Hence it may called before window.onload method. We can have multiple document.ready() methods on a web page that will be called in coming sequence. On the other hand, window.onload method gets called when images and all associated resources of the page have been fully loaded. Suppose your web page has large size images then until all the images are not fully loaded on the page, window.onload method will not called.

So, just replace the code:

window.onload=function(){
    $("#pastShows").click(function () {
        $(".shows").toggle("slow");
    });
}

with:

$(function()
{
    $("#pastShows").click(function () {
      $(".shows").toggle("slow");
    });
}

Hope this helps!