You can dash out an HTML page quickly using a hosted version (also known as a CDN) of  JQuery, which means you don’t have to copy JQuery to a local directory. Here’s an example.

Start with a minimal HTML5 file:

Somewhere between the <head> tags, link to the latest version of JQuery from jquery.com:

Add your Javascript somewhere between the <body> tags. It’s best to put your code close to the closing <body> tag at the bottom so the rest of the page’s assets can load.

Here is the div that contains the online help. Note that its style is initially set to style="display: none;", meaning it’s invisible until the (More) link is clicked. If anyone clicks on the link with the anchor text (More) It reveals a div that is otherwise hidden. This is where you’d put the help text. Because it’s a toggle function, the customer makes it disappear simply by clicking again.

This code simulates online help. Here’s what happens:

  • The code between $(document).ready(function() { and its closing } bracket is the JQuery document ready function, which does not execute until the full HTML document has been loaded.
  • The code between ("#showhelp").click(function(){ and its closing } bracket executes when anything with an ID of “showhelp” is clicked. It doesn’t have to be a link as shown. It could be a button
  • There is a link going nowhere (target of "#" with the ID "showhelp"
  • There is a div with the ID "helpmessage". Its visibility gets reversed when the "showhelp" link is clicked, using the code $("#helpmessage").toggle();

Here’s the whole program. Click here to try it:

 

Update August 2014

Amazingly, even these did not pass the W3C validator because they lacked a title tag. They are shown with a space between them because the validator regards an empty title tag as an error. Examples have been duly updated.

NOTE:

This post is outdated. Please see Minimal HTML5 Document With Latest Version of jQuery from CDN.

Minimal HTML document that loads the most recent version of jQuery version 1.X. There’s no way at the moment to designated the latest version, period.

NOTE: Oh Yes There Is

JQuery can indeed do that for you. Minimal HTML5 Document With Latest Version of jQuery from CDN.

Try it now

Here’s a complete HTML file with jQuery actually doing something. Clicking the button shows or hides a div containing the text “hello, world.”