bassistance.de

458 Responses to “jQuery plugin: Accordion”

1. brent starling says:

   27. February 2008 at 18:27

   Fantastic bit of code dude… but i have a question about using this for a navigation. it says in the page above that you can do the following:
   
navigation (Boolean): If set, looks for the anchor that matches location.href and activates it. Great for href-based pseudo-state-saving. Default: false

   is there an example of this being used as i dont really get how to make it set the ‘active’ link!?

   thanks

   /brent
2. Nick Pannuto says:

   4. March 2008 at 21:50

   Hey, great code, I wrote some of my own fucntions in to autohide the when animating to stop artifacting from happening. So it does almost everything, but how would I set it to have everything closed, so, when it’s loading there’s no awkward point when everything is exploded open.

   Open http://www.bestpaintstore.com in IE for an example of this awkward explosion.
3. -paul says:

   4. March 2008 at 21:58

   hey guys. i am trying to use a include file for the navigation

   its a 3 tired nav based on http://www.bluescap.com/nst/test2.php
   from Torgil

   i can keep my selection active.
   i have looked at the active and activate thing, but i dont understand it.
   i tried putting
   
jQuery('.level1').Accordion.activate('3');
jQuery('.level2').Accordion.activate('1');
jQuery('.level3').Accordion.activate('1');


   in the page that is calling the include but that dosnt work.
   but the nav gets reloaded every page link.. and dosnt keep its active state..
4. Andrés says:

   4. March 2008 at 22:07

   Hi, first of all I wanted to thank you because your menu is great and very easy to adapt to different needs.

   I’m having some trouble making the “speed” attribute to work…could you please put a more advenced example of a menu that uses it?

   I change its values but I do not see any difference in the menu’s behaviour. I’m working with IE7 and Firefox.

   Thank you very much and best regards, Andrés.
5. Designerno1 says:

   5. March 2008 at 15:46

   hello, i try to develope an effect for the ui accordion (this one) witch first close the opend element and then open the clicked element. is there anybody who can give me a sign how this works with the plugin? best regards Jens
6. Per says:

   6. March 2008 at 20:28

   Hi Jörn – and thanks for a wonderful implementation of the Accordion menu. Splendid work
   I have one question though, as I’ve looked at the other accordion-plugin – is it possible to leave menus open unless clicked?

   http://dev.evenet.org/
7. Jörn says:

   8. March 2008 at 11:32

   @Elaine: This accordion focuses on not allowing more then one panel open at a time. What you are looking for is quite easy to do with plain jQuery.

   @Stephan: Thats fixed in the latest revision.

   @Martin: I can’t reproduce the issue you describe, could you check it again with the latest revision, or post a testpage?

   @Paul: This sounds like it is related to the issue where anchors within content elements didn’t work, that is now fixed.

   @Tom: The flash of content may be caused by something else delaying execution of the accordion script. Can’t say much about that without a testpage.

   @Derik, Dustin, Mike: Fixed in latest revision. Links now work just fine within content elements.

   @Santiago: You could try the different wmode options.

   @Domenico: Give the clearStyle:true option a try. If that doesn’t help, please provide a standalone testpage. I can’t find your accordion-init code on that page.

   @Phil: Using the latest revision, specify event: false or null/undefined.

   @Andrew, Watsei: No, header links are not supported and won’t be. If you need that, add your own logic, eg. bind a click event.

   @Djoh: You can hide the whole menu via CSS and show it once loaded via jQuery.

   @Chuck: That option was added after the 1.5 release. Give the latest revision a try – or the current release at your time of reading this.

   @David: Could you provide a testpage instead of pasting copied demo code?

   @stoyan: While the documentation says that the animated option accepts a boolean, it only accepts a boolean false. Or a string specifying an animation type.

   @Andrej: Didn’t quite get the issue, seems to work ok.

   @Charlie: Multi-level accordions work in the latest revision with autoheight:false and clearStyle:true.

   @christophe: An early version of the plugin supported that, but it wasn’t worth the trouble. You have to stick with a single dd and nest your content inside it.

   @Alexander: Please give the latest revision a try. There are quite a few related issues fixed.

   @Levi: Give clearStyle:true a try. Or disable animations (animated:false) if it doesn’t help.

   @Jose: Please give the latest revision a try and set autoheight:false and clearStyle:true to get the nested accordions to work.

   @Debbie: You may want to start with some jQuery basics first.

   @Robin: Please give the latest revision/version a try.

   @Brent: Take a look at the demo page, the second example (“Navigation”).

   @Nick: Hiding stuff using CSS should help – its applied before the JS.

   @Paul: Looks like you need a tree, not an accordion.

   @Andrés: The speed option was replaced by the animated-option. Specifying custom speeds is a bit more complicated, but much easier to use once setup. Take a look at the implementations of bounceslide and easeslide for a reference:

   $.extend($.ui.accordion, {
   	bounceslide: function(options) {
   		this.slide(options, {
   			easing: options.down ? "bounceout" : "swing",
   			duration: options.down ? 1000 : 200
   		});
   	},
   	easeslide: function(options) {
   		this.slide(options, {
   			easing: "easeinout",
   			duration: 700
   		})
   	}
   });

   @Designern01: See the previous answer. You need to provide a custom animation “specification”. In this case, a custom easing which provides the close-first-then-open behaviour. You may want to take a look at jQuery’s animation API first.

   @Per: As noted before, that isn’t what this plugin is about.
8. Jörn says:

   8. March 2008 at 11:37

   Comments are now closed.

   • Please post questions to the jQuery UI discussion list, putting [accordion] into the subject of your post, making it easier to spot it and respond quickly.
   • Please post bug reports and other contributions (enhancements, features) to the jQuery bug tracker (requires registration). Please put [accordion] into the title of a ticket.