I will begin by stating that jQuery has certainly made everyone’s life much, much easier. Specifically, I find that I enjoy the toggle function.

You see the little RSS icon on my bar over there? You know, the orange square. Click it – I dare you. See how nice and easy that text appears? Well, you can add a nice, easy, and cute RSS feed to your own site as well.

All it takes is a little bit of imagination, a few snippets of code, and an even smaller amount of jQuery.

Let’s start with the markup. I added in a Text widget to my sidebar, as opposed to completely editing my style, and dropped this into it:


Add my feed to your reader today to get updates!
<br /> <br />

<a id="rssIcon"><img src="http://belinkddesign.com/images/rssicon.gif" alt="RSS" /></a>
<br />
<div id="rssFeed" style="display:none;"><a href="http://belinkddesign.com/blog/feed">http://belinkddesign.com/blog/feed</a></div>
<noscript><a href="http://belinkddesign.com/blog/feed">http://belinkddesign.com/blog/feed</a></noscript>


What we have here is an anchor with the id rssFeed wrapped around the icon of our RSS gif. Below that is a div with its display set to “none” with the link to the feed. However, as there are those few individuals which might not have JavaScript enabled, I added in a “noscript” link below the div in order to increase accessibilty to my blog’s feed.

Now that we have our markup added, we can add the jQuery.

In your header.php file, add the following lines of code:


<script src="jquery.js"></script>
  
  <script>
  $(document).ready(function() {
$("#rssIcon").click(function() {
$("#rssFeed").toggle("slow");
});
});
  </script>


Of course, your script source attribute should link to your jQuery file (which can be downloaded here).

Below that, the second line makes the jQuery load once the document (the web page that the jQuery is on) is loaded, and below that, your anchor named clickMe (“#rssIcon”) has been given a click function to toggle “#rssFeed” at a “slow” speed. You can, of course, edit the speed to “normal” or “fast”, or for a more custom speed, wrie a number of milliseconds. Or, for instant-appearing text, you can simply leave the speed animation out and just have toggle()!

Just another fun jQuery function!