Showing and hiding code examples with jQuery

Dabbling around with jQuery for the last chapter in my upcoming book about JavaScript, I realised it is dead easy to do something that really annoyed the hell out of me for a long time:

When you display code examples in online tutorials and you don't want to use server side includes to show the code (as you want to offer the explanation page as documentation as well) you need to maintain the code in two locations: The code itself and the code examples in the documentation. Now, jQuery has these really cool methods to do easy AJAX calls, why not use them to pull in the code when the user clicks the link to the code? Click the following links for examples, and right-click them to save the code examples. The first code example is the jQuery code that makes it happen.

Turning a link into a "code preview" link is easy: simply add a class called "codeExample".

Comment on the blog

Digg this | Add to | Technorati