How to show() an id block

Question

I have this jquery code that will not reveal a content block that starts our as display: none

$(document).ready(function() {
  $(window).load(function() {

    $('#anId').hide(); // show section
    $('#anId').show(); // show section
    $('#anId').hide().show(); // show section
    $('#anId').css('display', 'block'); // show section

  }); // end .load()
}); // end .ready()

Any ideas of suggestions as to why?

Here's the markup:

<fieldset class="formField__marginTop formField__area" id="anId" style="display: none;">
<legend>Reservation Notes</legend>
<div class="formField__optional">
<label for="reservationNote">Optional Notes</label>
<textarea name="reservationNote" id="reservationNote" rows="5" cols="21" class="formField__text formField__textarea255" enabled="enabled" maxlength="255"></textarea>
<small class="formField__tip">Enter any additional and pertinent information relating to this reservation.</small>
</div>
<div class="formField__optional">
<label>Note Type</label>
<fieldset class="formField__list formField__inlineButtons" enabled="enabled">
<label for="reservationNoteType_746440">
<input type="radio" value="0" name="reservationNoteType" id="reservationNoteType_746440" class="formField__list" checked="checked"> Private (Internal Use Only)
</label>
<label for="reservationNoteType_445052">
<input type="radio" value="1" name="reservationNoteType" id="reservationNoteType_445052" class="formField__list"> Public (Customer Viewable)
</label>
</fieldset>
<small class="formField__tip">Choose whether this note is for internal or external use.</small>
</div>
</fieldset>

Answer 1

use only one of this handlers $(document).ready() or $(window).load and your script should work fine.

note that the $(window).ready run before the $(document).load().

Answer 2

Your problem is that you've placed a window.load event inside a document.ready event. window.load should happen after document.ready so it will never fire. document.ready is better for this kind of effect because it fires when the DOM is ready for action.

Remove the $(window).load(function() { part and corresponding }); and your code should work.

Edit:

The window.load event will fire when the window object has finished loading. You can actually attach a load() event to anything, so you can fire it when an image has finished loading or similar. Further details are available here:

https://api.jquery.com/load-event/

The document.ready event will fire when the DOM is fully loaded - this is generally the point when the page is ready to accept manipulation by JavaScript. As @Jason P pointed out, this is in fact before window.load because that event fires when everything in the page has finished loading. There are more details here:

http://api.jquery.com/ready/

A practical example would be a simple page with a really big image in it which takes a few seconds to load. The document.ready event will fire when the DOM has been constructed by the browser, but the window.load function will only fire after the image has loaded so this could be a few seconds after the page has been displayed.