Montag, 10. Mai 2010

Micro Accordion

JQuery Micro Accordion Plugin is a small (1.33 KB) plugin that creates a simple accordion - no bells or whistles. It's pretty easy to use just download it at the bottom of this post. A demo is included in the download.

Features
  • It hasn't much features (you're not going to need anyway ...)
  • Easy to implement.
  • Supports custom Animations.
  • It's small!

Screenshot



Demo
Try it here

Usage
The HTML Code:
<div class="microaccordion">
 <div class="micro">
  <a href="#">Title 1</a>
  <div>Content 1</div>
 </div>
 <div class="micro">
  <a href="#">Title 2</a>
  <div>Content 2</div>
 </div>
</div>

The JS Code:
$('.microaccordion').microAccordion({
 cssClassOpen: 'header-open',
 cssClassClosed: 'header-closed',
 cssClassHoverOpen: 'header-hover-open',
 cssClassHoverClosed: 'header-hover-closed',
 cssClassContent: 'content',
 openSingle: true,
 closeFunction: function (obj) {
   obj.hide();
 },
 toggleFunction: function (obj) {
   obj.toggle();
 }
});

Questions or problems? Just leave a comment.


Download
Get the following file hosted on ubuntu one:
Download Here

Kommentare:

  1. Hi,
    FYI the "Try it here" link is reaching a page with this message:

    Parse error: syntax error, unexpected T_STRING [..]

    AntwortenLöschen
  2. Thanks,
    I guess the site was down, I don't get this error.

    AntwortenLöschen
  3. I wanted to always have at least one open tab, so I added a default option:

    allowAllClosed: true

    And then added the following test near the top of the click handler:

    if (a.hasClass(o) && !opts.allowAllClosed && (obj.find('.' + o).length == 1)) {
    return false;
    }

    AntwortenLöschen
  4. Hey Eric, nice code! That's kinda the idea with my micro thingies ;-) providing a smallest possible (but yet working) UI Element.

    Good Work!

    AntwortenLöschen
  5. I like the simplicity of this accordion, a great one. I have one question, If I want start the page with all accordions collapsed, what do I need to do?

    AntwortenLöschen
  6. Currently this won't work. But I'll get this in the next version (might take a few months, since I develope these plugins when I need them in a project - and I'm quite busy at the moment :-S)

    Sorry, but thanks for this idea!

    AntwortenLöschen
  7. Dutch neighbour3. März 2011 um 21:38

    Hello,

    I'm a total JS-noob, but how do you add animations? For example content that slides out.

    AntwortenLöschen
  8. Thank you so much, author. You JQuery Micro Accordion Plugin is so elegant and can be customized easily, that i was able to solve task i could not deal with trying other similar plugins. Thanks, mate.

    AntwortenLöschen
  9. Hi. How to fis this:
    $(".microaccordion").microAccordion is not a function

    AntwortenLöschen

Socialize!