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:

backlinkhub.co | 522: Connection timed out

Error 522 Ray ID: 4ccdac01ea6856e1 • 2019-04-25 04:46:43 UTC

Connection timed out

You

Browser

Working
Ashburn

Cloudflare

Working
backlinkhub.co

Host

Error

What happened?

The initial connection between Cloudflare's network and the origin web server timed out. As a result, the web page can not be displayed.

What can I do?

If you're a visitor of this website:

Please try again in a few minutes.

If you're the owner of this website:

Contact your hosting provider letting them know your web server is not completing requests. An Error 522 means that the request was able to connect to your web server, but that the request didn't finish. The most likely cause is that something on your server is hogging resources. Additional troubleshooting information here.