Jquery Show On Click Magic

Lets just say that you want something (an image, a phone number, whatever) to show when someone clicks on a link.

You can do this using the jQuery javascript library in WordPress.

First things first

Make a post in WordPress just like you normally would.

If you are using a more recent version of WordPress (3.0+ as of this writing), then scroll down below the text area and find the Javascript area that looks like this.

Couple things to do here:

1) Tick the box that says jQuery library.

2) Where is says Embed Your Own JavaScript embedded script code (please include <script> tags), add the following (modified from Slicker Show and Hide):

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script language="javascript">
$(document).ready(function() {
 // toggles the slickbox on clicking the noted link
 $('a#slick-toggle').click(function() {
 $('#slickbox').toggle(400);
 return false;
 });
});
</script>

Now, go back up to your post.

Click on the HTML tab

and add the following (this will display a link that when clicked shows a phone number – make the appropriate substitutions).

<p><a href="#" id="slick-toggle">Call</a></p>
<div style="display: none;" id="slickbox">1 800 277 1212</div>

Publish your post and check it out.

Your post should have a link that looks (and acts) like this:

Call

Note, this effect only works on this particular page.

Comments on this entry are closed.

Previous post:

Next post: