Web Development

Web Development

Super Simple jQuery Accordion

Monday, 15 Jun 2009

After struggling to get jQuery.UI accordion working in a Drupal site, I gave up and decided to code my own little accordion. As it turns out, it was incredibly simple. All you need is jQuery.

HTML Sample:

<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>
      Mauris mauris ante, blandit et, ultrices a,
      suscipit eget, quam.
    </p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
      Sed non urna. Donec et ante. Phasellus eu
      ligula. Vestibulum sit amet
    </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>
      Nam enim risus, molestie et, porta ac,
      aliquam ac, risus. Quisque  
    </p>
  </div>
</div>

JavaScript (jQuery) Sample:

  <script type='text/javascript'>
    $(document).ready(function() {
      // accordion effect
      $("#accordion div").hide();
      $("#accordion div:first").show();
      $("#accordion div:first").addClass("active");
      $("#accordion h3").click(function() {
        $("#accordion div.active").hide();
        $(this).next().show("fast");
        $(this).next().addClass("active");
        return false;
      });
    });
  </script>

Is there a simpler way? Probably but this is pretty quick and easy too! ;)

Demo:

Section 1

Mauris mauris ante, blandit et, ultrices a,
suscipit eget, quam.

Section 2

Sed non urna. Donec et ante. Phasellus eu
ligula. Vestibulum sit amet

Section 3

Nam enim risus, molestie et, porta ac,
aliquam ac, risus. Quisque

Finding Articles on ANY Topic!

Friday, 22 Aug 2008

So you need some content for one of your sites, right?  Maybe you're using Blogger, or Squidoo or WordPress and you just need a handy RSS feed to plug in somewhere so your readers can have a little extra content to read, content that's already related to what you blog about.

Well I've Got the Solution to All Your Content Woes :)

FreeArticles.co.za now allows you to search through its index of over 70,000 articles and EXPORT the search results into an RSS feed.

Just replace the bold keywords in the following URL (spaces turn into plus (+) signs) to whatever you need and load it into your browser.  You'll get an RSS feed with all articles that matched your query.

http://www.freearticles.co.za/keywordfeed?filter0=photography+tips

Examples:

http://www.freearticles.co.za/keywordfeed?filter0=guitar+lessons
http://www.freearticles.co.za/keywordfeed?filter0=adsense+tips
http://www.freearticles.co.za/keywordfeed?filter0=internet+marketing

All of these will work and, best of all, they'll be a bit intelligent about the search and provide you RELATED articles as well.  So if you're into photography, it'll also show you a little bit about painting, in case you like that too :D

Then all you need to do is stick that URL into your blogging software and you're set!

Just remember to replace spaces with plus (+) signs.  So guitar tips becomes guitar+tips.

Enjoy!

Tags: , , ,