The Net is Dead

Marco van Hylckama Vlieg on web technology, design, life and everything

Commentary

Join the discussion! Leave a comment through the comment form below!

• At 20 July '08 - 20:47 Elliott Back wrote:

  

  If I click too fast on it, it can get into a state where it doesn’t do anything anymore!

  
  

• At 21 July '08 - 00:18 Marco wrote:

  

  Hi Elliott,
  
  Not sure HOW fast you click but I’m unable to reproduce that. I could however get it to throw an error when clicking like a maniac (faster than anyone would really). I fixed this error.
  
  Do you still get this problem now or did this fix it?
  
  If not, what browser are you using?

  
  

• At 21 July '08 - 01:12 Elliott Back wrote:

  

  Hmm, I still see this problem in FF3. Basically I click a bit, and it stops doing anything. No errors :P

  
  

• At 21 July '08 - 02:23 Marco wrote:

  

  I can’t for the world manage to duplicate this problem Elliott. I tried it in FF3 Mac and FF3 windows and I get no errors or whatsoever.
  
  Do you have ‘break on all errors’ enabled on Firebug by any chance?
  
  EDIT
  
  Nevermind. Even with break on all errors enabled I can’t get the widget to fail here…

  
  

• At 22 July '08 - 03:33 Patay Khan wrote:

  

  The bubbling library also have some good accordian control examples
  http://www.bubbling-library.com/eng/api/..

  
  

• At 22 July '08 - 03:46 Marco wrote:

  

  @Patay yes I have seen that. It’s very nice indeed! However I wanted to do a widget that is lightweight and requires nothing else than YUI core libraries.
  
  This is why I ended up doing this! I believe both of them serve a good purpose.

  
  

• At 22 July '08 - 11:19 ChevolDavis wrote:

  

  I am having issues with the nested accordion in IE even in your examples here it never shows the nested accordion. It works beautifully in FF and other browsers just the pain in the arse IE that causes an issue. IE 6 is what I have in parallels to test web UI and design. Is there any way you can help me out with this? I am going to use this to power the menu for this Reporting Module I am working on at work, so this is kinda a big deal for my app. Great work btw!!!! keep it up :)

  
  

• At 22 July '08 - 13:08 Marco wrote:

  

  @ChevolDavis Whoah! That’s an EXTREMELY nasty one. I ‘sort of’ fixed it for now but I don’t really like it. However until I find something better this will have to do. Here’s what’s going on:
  
  This turned out to be a pure CSS issue. I started investigating in IE6 with the Developer Toolbar (thank God for this thing, even though it’s a bit clunky). I found that when I set zoom:1; for the inner accordion in the toolbar, the menu all of a sudden showed up and worked fine.
  
  “Hah! That’s easy!” I thought and went ahead and added a zoom:1 in the CSS for all accordionviews. This however didn’t fix it at all!
  
  So far, the only way I could fix this issue in a sort of acceptible way was to set zoom:1 on any inner Accordion after the panel that contains it has finished it’s opening animation. What’s more, I have to UNSET this when the panel is closed or things will look seriously messed up. Therefore this is now all handled in the javascript, as much as I hate this.
  
  After the panel finishes opening, zoom:1 is set to any inner Accordions that are found. This results in the inner Accordion showing up only after the animation has finished, but if I set zoom:1 at the start of the animation the whole thing doesn’t work!
  
  Then, after finishing the animation that closes the panel, I set zoom: auto. If I don’t, re-opening the panel will look completely messed up.
  
  This is an EPIC mess! I realise. I’ll try to find a better solution to this problem. At least however it’s now usable in IE6.
  
  Thanks for reporting this issue!

  
  

• At 22 July '08 - 13:40 ChevolDavis wrote:

  

  NP, thanks Marco for looking into this soo fast. It does work much better, but still a little issue on the closing of the panel. The panel is still visable during the animation effect while closing and thus shows the nested panel until the animation is finished. You are almost there tho, funny because I was messing around with the .css and was easily able to get it to show up, but like I said, that was the easy part.
  
  I am a backend programmer and I really have limited knowledge of css and this is way over my head. I think you are almost there tho. If it helps I can send you a URL to the app I am working on that uses the accordion so you can get a better idea of what I am talking about. Possibly even how I am wanting to use it. Getting kinda hard because of the styling I would like I am having to give the nested panel a different class (yui-accordionview2) which I am sure is causing problems somewhere else.
  
  I realize I probably am not explaining it the best way possible, but thanks. Thanks for the work on this and thanks soo much for the extremely fast response. I was truly amazed!

  
  

• At 22 July '08 - 14:10 Marco wrote:

  

  No problem! I wanted to fix it as soon as I saw this ;)
  
  About the inner Accordion and changing it’s class: You can NOT change / remove the class name yui-accordionview. This will break the javascript. You can ADD any extra class name or work with the ID of the menu CSS wise but don’t change or remove any of the existing class names. They’re used by the javascript.
  
  About the panel still being visible during the closing: I could set the whole thing to visibility: hidden but I’m not sure how great that makes things look. If this would help you out however it’s no problem for me to send you a version that does that.
  
  If you want to show me your app go ahead and send me an email!

  
  

• At 22 July '08 - 14:49 ChevolDavis wrote:

  

  yeah I figured that out pretty quick about changing the class name. I did just use the ID and that worked perfectly!
  
  On the whole visibility:hidden thing I would have to see it first. Can you tell me what lines in the js to change/update so I can see how it looks? If not can I get that version to test it out?
  
  I owe you big for this, you need to put a donate button somewhere on your site ;)

  
  

• At 22 July '08 - 23:47 Oash wrote:

  

  I hae jut integrated the accordion to drupal. It works fine except for the following issues.
  
  1. In IE 6.0, all external links does not work, however, they work in FF.
  2. In FF, the headers of the accordion went far away from each others, however, in IE, it works fine.
  
  Regarding the first issue, am i missing certain .js from YUI
  
  currently, i am including (utilities.js, accordionview.js)
  
  Thanks

  
  

• At 23 July '08 - 04:18 Marco wrote:

  

  @Oash thanks for reporting!
  
  Can you set up some demo pages for me where I can see the problems in action? I’ll try to fix it ASAP!

  
  

• At 23 July '08 - 04:27 Marco wrote:

  

  @Oash I had a quick look and fixed the IE6 external links problem!
  
  Demo page and download have been updated.
  
  The other problem you’re describing sounds like a CSS issue. Did you tweak the CSS or even radically change it?

  
  

• At 23 July '08 - 08:00 oash wrote:

  

  Hi,
  
  Thanks for the quick response. I will try the new updates soon and keep you informed. Regarding the second issue, in FF, there is like a ‘padding-bottom’ at the end of each panel. i.e, at the bottom of each panel, let’s say 15 px height, the left and right border does not exist.! I will try to send you a snapshot when i test the new code. After the problem occured, i replaced the accordion with YUI tabView and worked well in terms of CSS in both browsers.
  
  THANKS!

  
  

• At 23 July '08 - 08:09 oash wrote:

  

  Regarding example 3 on your website, when you select the first item, the second item header is padded from left due to image, i do not think you intended that.
  
  Thanks

  
  

• At 27 July '08 - 10:12 Memorathoner wrote:

  

  Marco,
  
  Excellent piece of work!!
  
  I have 2 suggestion (in case they have not already been made):
  (1) Right-align the collapse/expand button.
  (2) fill configuration property (cf. Class Ext.layout.Accordion : Config Opti.. )
  
  I hope it will be included in the future releases of the YUI Library.
  
  Regards,
  Michael

  
  

• At 27 July '08 - 10:59 Marco wrote:

  

  Thanks Michael!
  
  About your remarks: I’ve been thinking about the placement of the / – sign. Why do you think right is better? It’s a matter of changing a ‘left’ into a ‘right’ in the CSS so it’s extremely trivial to change. Just wondering why right is better…
  
  About the ‘fill’ thing: I have a dev version almost ready to replace the current demo. It’s here:
  
  http://www.i-marco.nl/weblog/yui-accordi..
  
  This version is fully parameter configurable and can build itself from scratch. Panels can also be added in both a batch or on a one by one basis. You can remove panels as well. Is this less good than the Ext way of doing things? Let me know!

  
  

• At 27 July '08 - 13:19 Memorathoner wrote:

  

  Marco,
  
  Why is right for the collapse/expand button better? The following two reasons come immediately to my mind:
  

  
  
  • It is de facto standard. You come to expect window/pane handling elements on the right side of the window (Although I have encountered similar solution to yours in Turbo Delphi’s Tool Palette),
  
  

  
  

  
  
  • Personally, I would like to denote each panel with its corresponding icon. If I do that I end up with a lot of elements on the left side and none on the right. On the other hand, you can see that in available tree views. Hmmm… How about making this one configurable?? Do you believe it would be an overkill?? On a related note, how about adding the classname configuration option??
  
  

  
  
  Yes, I am aware of the bleeding edge version and I keep track of it. I am very happy with all the power you keep adding. However, what I would like to do is to combine your AccordionView with Dav’s Layout Manager with minimum CSS hassle. “Drop” it into the left pane and set it to automatically accomodate the available space. What I would like to see is to have fixed height panes (as opposed to the current ones whose height depends on their contents). If the content does not fit, the scroll-bar should appear (_overflow: auto_ would do the trick).
  
  I love your work and see immediate implementation potential which I would like to utilize in my current development.
  
  Thank you very much for your hard and inspiring work.
  
  Regards,
  Michael

  
  

• At 27 July '08 - 13:34 Marco wrote:

  

  Thanks for the compliment Michael, I appreciate it!
  
  About the placement of the icon: I’ll think about it. I’ll ask some more opinions! For now if you want this, just change ‘left’ to ‘right’ in line 57 of the CSS file and you’ll have it aligned to the right.
  
  Then about the layout manager: If you specify ‘auto’ for width, it should do what you want! Try it out and let me know if this works.
  
  Then finally for the fixed height panes, I suppose implementers can do this with ease as well by modifying a few lines in the CSS file. I mean, people are probably going to restyle it anyway right? :) I’ve already seen people do this and in fact I’ve done it myself in something I’ve been doing at work!

  
  

• At 29 July '08 - 01:36 Mathijs wrote:

  

  I really like this accordion. I’m using Coldfusion 8, this also works with the YUI library, so that is cool!
  
  What i try to achieve is to have an accordion in a form that uses a CSS to style it. Is there a way i can easily do this?
  
  now:
  ———————————————-
  <ul id="mymenu">
  <li><p>Item 1</p><div>
  <fieldset>
  <ol>
  <li>
  <label for="companyName"></label>
  <input name="companyName" id="companyName" type="text">
  </li>
  ———————————————-
  What i would like:
  <fieldset>
  <label>accodion label</label>
  <ol>
  <li>
  <label for="companyName"></label>
  <input name="companyName" id="companyName" type="text">
  </li>
  ———————————————-
  
  How could i achieve this?

  
  

• At 29 July '08 - 03:19 Marco wrote:

  

  @Mathijs might this be what you’re looking for?
  
  I whipped up a quick demo.
  
  http://www.i-marco.nl/weblog/yui-accordi..

  
  

• At 29 July '08 - 03:35 Mathijs wrote:

  

  Fantastic, that will help for sure.

  
  

• At 30 July '08 - 16:11 Marco wrote:

  

  @Mathijs I have made the form example a bit more interesting. You can now even use the tab key to navigate through all form elements and the appropriate panels will open when necessary. Shift-tab works as well to navigate back up.
  
  http://www.i-marco.nl/weblog/yui-accordi..

  
  

• At 28 August '08 - 10:26 santosh wrote:

  

  Hi,
  Is it possible to have two nested or more nested items in one accrodion?
  example
  
  Item1 will have 4 nested items
  iteam2 will have 4 nested items
  iteam 3 will have 10 nested items
  
  I tried to do this using the example of nested accordion but only one item works next two dont work. Any suggestions?
  Thanks

  
  

• At 29 August '08 - 02:20 Marco wrote:

  

  I’m not completely sure what you mean @santosh .
  
  Do you want one accordion with 4 additional accordions in item 1, 4 additional accordions in item 2 and 10 additional accordions in item 3?
  
  Note that, with all due respect, this is a really bad idea in terms of user interface design. Nested accordions are a bad idea in general in my opinion.

  
  

• At 29 August '08 - 07:21 santosh wrote:

  

  Hi Marco,
  Yes i meant what you said, I was trying out different options and I figured out how to do it, I agree with you about have nested accordions but sometimes clients like it and I was trying it out. Thanks much for your response.

  
  

• At 08 September '08 - 19:19 Tao wrote:

  

  Hi Marco,
  
  Thanks for excellent widget. It works very well in my test site.
  
  The only issue is that I would like to add an id on each panel. Now I have to change the addPanel function in accordionview.js:
  
  addPanel : function(oAttr, nIndex) {
  var oPanelParent = document.createElement(this.CONFIG.ITEM_WRAPPER_TAG_NAME);
  oPanelParent.id = oAttr.id;
  
  Could you support this in the future release please?

  
  

• At 28 September '08 - 17:10 Alon wrote:

  

  Hi Marco,
  
  Love your widget, and have some suggestions to make it even better:
  
  1. When used along with the Layout Manager, if a panel’s content is longer than the layout unit, the scroll bars remain after that panel is collapsed.
  Setting a css display:none to the hidden class seems to do the trick.
  
  2. I think that there should be an ability to use a DOM element as content when adding a panel (via addPanel). Easy to do and effective.
  
  3. Getting a panel by one of the content elements’ IDs can be a nice feature (similar to the getLayoutUnitById).
  I have created such functionality. Works nicely and is handy.
  
  Cheers!
  Alon.

  
  

• At 29 September '08 - 09:01 Max wrote:

  Hey there,
  
  nice script. However, I have one problem using a markup like this:
  
  <ul>
  <li>
  <h3>test <em>something else</em></h3>
  <div>stuff goes here</div>
  </li>
  </ul>
  
  when you hover “test”, the accordion opens, but wen you hover over the text between the <em> tags nothing happens. Any way to fix this?

  
  

• At 30 September '08 - 10:14 Chris wrote:

  

  Marco,
  
  I’m kind of new to the YUI library and am having an issue with your accordion widget. If I try to use document.write() calls as content within the accordion panels weird things are happening with Firefox 2 (2.0.0.17).
  
  Here is a small example page:
  http://www.wfyi.org/dev_priv/newWFYI/acc..
  
  Notice how in Firefox the content of the panels is written at the bottom of the widget. This behavior is not present in IE 6 or 7.
  
  I need to use document.write() in order to include some remote content modules produced by some of our programming distributors.
  
  Any suggestions or work-arounds are welcome.
  
  Thanks,
  Chris

  
  

• At 30 September '08 - 12:43 Marco wrote:

  

  @Chris this is because the widget rewrites the markup for the accordion. You canot use document.write, full stop. You can use the addPanel method to add a new panel with content you got from somewhere else. Have a look at the documentation and you’ll see!

  
  

• At 01 October '08 - 15:43 mingfai wrote:

  

  Thank you very much. I’m using the AccordionView and it’s really cool and it works perfectly with my other YUI widgets.
  
  Just one comment. When using a form/fields in AccordionView, the keyboard up and down keys could/will be used by user to choose ‘memorized’ field value. I’ve disabled handling of the two keys in my local version and I suggest it should not be enabled by default. (maybe page up and page down could be replacement, but it causes another problem as people may want to scroll down the screen)

  
  

• At 06 October '08 - 21:16 Daniel wrote:

  

  Thank you for this excellent widget! :)
  I noticed a few problems, though. When you nest items, only include one nested item, and set “collapsible” to true(not sure if that’s relevant) if you try to open the parent item, followed by the child, it collapses the parent, hiding the child. If you open the parent again you’ll see the child is open already. This is reproducible in FF3 and IE7. Also, unless I’m initializing the nested menus wrong, if you do more than three, they will start to fail to initialize. You get this error: “this._panels[oAttr.expandItem] is undefined – accordionview.js
  Line 343”. I can run the command from the FireBug console and it will initialize the third nested menu, but also throws the same error. Thanks!

  
  

• At 23 October '08 - 07:51 Matt Perry wrote:

  

  Hi Marco,
  
  Sorry if this is a stupid question but I’m new to Javascript and YUI. I’m using your accordion widget to display data that I’m pulling via Ajax calls. What I would like to do is refresh the accordion panels from their cooresponding Ajax feeds each time the Panel is opened. I don’t want to add a New Panel or remove one I just want to update the contents of the panel with the data from the Ajax call each time. So my basic code was was adding a listener on the panelOpen event and then interogate which panel fired the open event and update its content from the approriate Ajax Call. To me this sounded logical and using your Basic example I’ve been fumbling with the code, but I can’t seem to understand how to access the content of the panel which fired the vent in the function I’ve setup to respond to the panelOpen event. Looking at the docs there is no updatePanel method so I thought I code and my own div with unique IDs and use DOM functions to update the div’s innerHTML when my on function got control.. But for some reason my div tags get eaten when I init my accordion. If you wouldn’t mind giving me a hint on what I’m doing wrong or a simle example I would be in your dept.
  
  Snipit Example Code:
  
  Item 1
  
  Panel 0 Text
  
  
  Item 2
  
  Panel 1 Text
  
  
  Item 3
  
  
  Panel 2 Text
  
  
  
  Item 4
  
  
  Panel 3 Text
  
  
  
  
  
  
  function PanelLoad( e, panel){
  var Panelid = ‘pMenu’ e.index;
  var PContents = $(Panelid).innerHTML;
  }
  
  var menu1 = new YAHOO.widget.AccordionView(‘mymenu’, {collapsible: true, width: ‘400px’, expandItem: 2, animationSpeed: ’0.3’, animate: true, effect: YAHOO.util.Easing.easeBothStrong});
  menu1.on(‘panelOpen’,PanelLoad, menu1, true);

  
  

• At 24 October '08 - 09:55 Dan wrote:

  Would it be possible to use a link in the ‘standard’ accordion (with markup) you’ve made to pop up the ‘form’ accordion where upon clicking submit it would add/change the java markup?
  
  I know that you can dynamically add a panel from a script, but how would you be able to make sure that the added panel is saved throughout sessions?
  
  does the “menu1.addPanel” method work across sessions?
  
  is there a method such as menu1.removePanel which would remove respected panel?
  
  what about something such as getting the panel information? menu1.GetContent(panel name)?
  
  what about something such as changing panel information menu1.editcontent(panel name)?
  
  Thanks,
  Dan

  
  

• At 25 October '08 - 05:14 Marco wrote:

  

  Hello guys,
  
  Thanks for all your comments. I’m posting this comment just as a heads up that I’m not forgetting about all this.
  
  I’m in the middle of moving contries (UK to USA) which is why I don’t have much time at the moment. The good news however is that AccordionView will be included in the next official release of YUI and I will definitely address all bug reports and enhancement requests before this release.
  
  Please bear with me until the end of November. After that I’ll be working on this widget more actively than ever.
  
  Thanks for your patience!

  
  

• At 28 October '08 - 16:53 Fung wrote:

  

  I am new to YUI. Could you provide an example how to do fixed height panes. You said implementers can do this by modifying a few lines in the CSS file. I would like to set the pane height according to its container. For example, it always set the yui-accordion-content height to the full length of its container.

  
  

• At 30 October '08 - 03:25 Marco wrote:

  

  @Fung an easy way to do this is put elements inside the panels that have a fixed height.

  
  

• At 05 November '08 - 07:19 Erik Gomersbach wrote:

  

  Hi Marco,
  
  thanks for the great widget.
  
  I’m having currently an issue on IE6

  
  

• At 10 November '08 - 07:47 Erik Gomersbach wrote:

  

  Looks like most of my previous post got lost. I’ll try again…
  
  I’m using addPanel to add my panels dynamically to the accordion view. I need to know the index, so I decided to use addPanel with an index. This fails on IE though as the method uses getPanel internally, which returns undefined as initially there aren’t any panels.
  
  Now I’ve got two questions:
  
  - Should I add my panels in a different way? – If not would it be possible to make addPanel return the index of the panel added?
  
  Thanks,
  Erik

  
  

• At 12 November '08 - 12:39 Danny wrote:

  What about displaying tables in the accordion and in the title of each accordion piece?

  
  

• At 20 November '08 - 17:00 Nicholas Alipaz wrote:

  

  I am having a small issue. I am using the nested accordion example.
  
  What I am attempting is to have some text in the header aligned left and some other text aligned right.
  
  So (cross my fingers that this code comes through):
  Headersome other text
  
  .left { float:left;display:block; }
  .right { float:right;display:block;text-align:right; }
  
  The issue is that clicking is broken after adding the spans. Seeing how there are no errors in console or firebug, it makes troubleshooting a little difficult.
  
  I can only assume that the clicks are finding my added nodes (the two spans) rather than what it is really looking for.
  
  Any help is appreciated.

  
  

• At 20 November '08 - 17:05 Nicholas Alipaz wrote:

  

  from my last post, of course my html didn’t come through…
  
  quite simple, it was:
  http://html4strict.pastebin.com/f40af05c..

  
  

• At 22 November '08 - 17:47 Mingfai wrote:

  

  I found two problems in using Accordion View:
  
  1. When I add a DD to it, I can’t find a way for the toggle area to be draggable. The list content area can be draggable, however. I suspect the the toggle area handled and stopped drag event. do you have any solution to make the toggle bar draggable?
  
  2. When YUI Radio Buttons are used inside a Accordion View, they are “duplicated”. Check my URL for a error demo. Scripts inside a Accordion tab is possible run twice. If the radio buttons are defined with HTML, there is no problem.

  
  

• At 28 November '08 - 18:44 Steve wrote:

  

  Marco;
  
  This is fantastic work. I got to this page by way of your jQuery version. I’m more conversant in jQuery than I am in YUI so maybe my two questions are obvious but I can’t figure them out.
  
  1) Is there an easy way for the menu version of this widget to figure out what the current location is and expand its parent if it’s a “submenu” li element? Your demo uses links to external URLs so it’s not an issue but I wish to use this for navigation within a single domain. I’d rather not use the cookie approach you cooked up for the jQuery version. I’m thinking maybe the script would be able to append something like an “expanded” class to the heading element or something. And also append a “current” class to the li itself so it could obtain some distinctive style.
  
  2) Is it possible to have a heading element with submenu child items also be a link? I’m working with someone who feels strongly that there is the potential for confusion on the part of a visitor if a click doesn’t take them to a new page, so I need to create a sort of summary page when a top level menu item is clicked. Neither the jQuery or the YUI versions seem to allow an element to be both an accordion expansion trigger and a link.
  
  Thanks a million for any insights.
  
  Steve

  
  

• At 02 December '08 - 09:48 Dan wrote:

  I’m using “ClientScript.RegisterStartupScript(Me.GetType(), “openpanel2”, “menu1.openPanel(3)”, True)” in my default.aspx file for some reason I’m getting an error of “‘this._panels’ is null or not an object accordion” I’ve tried changing the number and the panel does exist.
  
  Does anyone know why I’m getting the error?
  
  It’s set to open the panel after the menu is created. It is the last line set to execute.

  
  

• At 10 December '08 - 08:23 Steve Anderson wrote:

  

  hi
  
  First of all, thanks for a great widget.
  
  I have a query that I was hoping you could answer for me. I would like to open a url from one of the top parent nodes, but I cannot seem to work out how to do that.
  
  For example, in your main example, you have a “Gadgets and photography” node, but I cannot attach either an onlick in a DIV or a HREF tag around the element.
  
  Any help or pointers would be greatly appreciated.
  
  Thanks
  
  Steve

  
  

• At 12 December '08 - 15:14 Chris wrote:

  

  Marco,
  
  I’ve posted before and I have to ask another question, since I’ve found another possible use for this cool widget.
  
  Here’s my problem. I’m using your accordion as a drop down menu. I’ve accomplished this in FireFox, at least, by enclosing the accordion in a fixed height div and letting the overflow stay visible. The div’s height is set to about the height of a single ‘closed’ accordion tab.
  
  Here is the example page:
  wwwwfyiorg/radio/wfyiHD1schedule.asp
  
  IE6 scrolls the remaining content down the screen, fine, but IE 7 overlaps the content with the content underneath and makes things illegible. The goofy thing that is making my head hurt, is this page:
  wwwwfyiorg/radio/wfyiHD1.asp
  
  You might notice that in IE7 the accordion is doing what I want it to, overlapping the “Alphabetic Program Listing:” content, but then we get down into a table and weirdness, for me at least, starts to happen.
  
  Any ideas? Thanks in advance for your (or other Web dev’s) reply.

  
  

• At 31 December '08 - 10:31 Lincoln wrote:

  

  Thanks for the widget… I am using the Accordion widget to build a sort of Hierarchical Grid….which means I have multi-nested Accordions….Iwas able to get it to work fine but it malfunctions sometimes…
  
  First thing – How can I have it do an ‘Expand All’ action…since the Accordions only expand when I click the ‘ /-’ icon.
  
  Secondly..the malfunction I mentiond earlier comes from one particular Accordion not being hidden when I collapse the top-level Accordion..Below is my layout :
  
  
  
  
  
  
  
  
  
  Ok so if I expand all the way to and then I collapse , everything collapses (or besomes “hidden”) except for ….I think it might be because the widget is not expectiing a multi-level nesting of Accordions… Can you help me in any way…
  
  Thanks
  
  Lincoln

  
  

• At 31 December '08 - 11:15 Marco wrote:

  

  For everyone wondering how you make it do ‘this’ or ‘that’ at startup or anywhere else in the widget’s lifecycle:
  
  Did you look at the API docs? There are several methods to open/close panels from script that can probably do most things you want!

  
  

• At 07 January '09 - 03:49 drecute wrote:

  

  Hey u did a good job, but I think there’s still much to do. I have used the accordion widget, but I think the “apple style” u placed in the widget is not functioning both in IE and FF2. Please kindly fix this.

  
  

• At 07 January '09 - 04:09 drecute wrote:

  

  ok! I have fixed the problem. i guess the widget “apple effect” cannot work on a single accordion tab. Good work from u. Please keep debugging.

  
  

• At 09 January '09 - 11:53 Sven wrote:

  

  I would like to youse the accordion on our website for several purposes. That means I need 2-3 accordion widgets on one site.
  
  I would like to know how I can use several different accordion`s with different CSS-files on one site. How can I asign a css file to each accordion?
  
  Seeing forward to hearing from you.
  
  Sven

  
  

• At 09 January '09 - 11:55 Marco wrote:

  

  You don’t need separate CSS files. All you need to do is write CSS rules that take the ID of your accordions into consideration and override the defaults like that as you need to.

  
  

• At 11 January '09 - 16:28 Dietrich wrote:

  

  Wonderful work Marco!
  
  I ran into a problem using “nopanel” on a nested accordion. Moving the test for the parent element in initList() so it happens before the test for nopanel seems to fix it.
  
  Dietrich

  
  

• At 14 January '09 - 09:33 Chris Lamb wrote:

  

  Hi Marco, Many thanks for such a useful widget. I am very grateful.
  
  Could you suggest a way to alter the contents of panels at runtime? If I have a panel closed and some data has changed in the background – how might I alter the code to dynamically alter the panel content using Ajax next time it is expanded?
  
  I am not sure if it is already frequently achieved – I don’t mind reading a bit, doing some work and extending code – just thought somebody may have a good starting point for me to look at?
  
  Thanks, once again.

  
  

• At 14 January '09 - 12:17 Klaudiusz wrote:

  

  Hi Marco,
  
  great! I have to try that one since I kept in my mind (when I was planning my own site quite a long time ago:) that I wanted to implement something like the bubbling-library in my project. Contrary to this ‘old’ effort yours seems to behave much more sophisticated though. I am looking forward to build it inside my page and after I experimented more with your widget I’ll be back here again to ask some questions and/or give a feedback :)... What I’ve noticed so far is e.g. that the ‘Apple’ style accordion doesn’t work that smooth as the example on apple does, but could be that you have images inside your example and apple is using their just with text… or there is some time parameter to change that would let the animation run quicker there? As I said I have to take a closer look on it…
  
  Cheers, Klaudiusz

  
  

• At 14 January '09 - 14:24 Marco wrote:

  

  @Klaudiusz it’s animationSpeed . I set it to 0.2 here for a demo:
  
  http://www.i-marco.nl/weblog/yui-accordi..
  
  I also set hoverTimeout to 200ms to make that a bit faster as well.

  
  

• At 21 January '09 - 10:40 Jay Wineinger wrote:

  

  Hi Marco,
  Great widget, first off.
  I’m trying to use it to do a complex form where each panel is a step and must be completed in order. So, I want to disable the ability for people to just click on the panel they want and have it open — I want to open it myself via openPanel(). There is some mention of doing this with the beforeStateChange event, but I’m not sure what to do.
  
  thanks
  Jay

  
  

• At 21 January '09 - 10:54 Les Green wrote:

  

  Hi Marco,
  
  I’m trying to use the Accordion Widget, but I keep receiving the error: “YAHOO.widget.AccordionView is not a constructor”. This usually occurs when a .js file is not loaded. I tripled-checked to make sure the path is correct.
  
  The accordion does view correctly in the Firefox browser that is built into Aptana Studio, but when attempt to view it in the actual Firefox browser, I receive the error mentioned above.
  
  To make sure that my existing code was not effecting the accordion widget, I copied the example code (index.html) that came with the download into a new html page, but I still received the error.
  
  I’m using FF3 on Mac
  
  Thanks. Les.

  
  

• At 31 January '09 - 16:50 Kent Johnson wrote:

  

  Hi, Marco. Great widget, nice job.
  
  I was getting some weird jumpiness in IE when implementing the Apple style settings with your accordion on a project. When I’d hover over a new panel, the previously expanded panel would begin collapsing as expected and the new panel would begin expanding as expected. However, right at the end of the animation, the collapsing panel would go back to full height briefly before being hidden causing some odd jumpiness.
  
  Anyways, after troubleshooting a bit, I fixed this by changing line 820 of accordionview.js from…
  
  oOptions = {height: {from: nHeight, to: 0}};
  
  to…
  
  oOptions = {height: {from: nHeight, to: 1}};
  
  Hope this helps. Thanks for the widget.

  
  

• At 03 February '09 - 10:38 Ran wrote:

  

  Hi Marco,
  
  Thanks for providing this widget.
  
  If you look at your example, when hovering with the coursor over the inactive (gray) panels and they change to light blue, the change is not smooth but rather there is a flicker.
  
  Why does that happen? Is there any way around it ?
  
  Thanks
  Ran

  
  

• At 04 February '09 - 17:09 Marco wrote:

  

  @Ran I cannot reproduce this behavior. In which browser does it occur?
  
  To all: I’m preparing the widget for official YUI release. Even though I haven’t replied to each and every one of you, all your feedback will definitely be incorporated in the new release!

  
  

• At 04 March '09 - 11:59 rolfsf wrote:

  

  Marco – nice accordion – thanks
  
  Is there a way to disable a panel? For example, I want only the first panel enabled and open when the page first loads, and then, after some event or action, the remaining panels are enabled. I don’t want to hide the disabled panels, I just want them grayed-out and disable the expand function.
  
  Thanks!

  
  

• At 15 March '09 - 06:24 Mazhar wrote:

  

  i m new with this widget. now i m facing a problem with hieght. u can chek it on infranix.com/srmcem.

  
  

• At 25 March '09 - 05:05 Alastair Fallon wrote:

  

  Firstly this is a great accordian widget and works beautifully, great work.
  
  But
  
  I have a question that has already been asked and was wondering if anyone has got a solution.
  
  I would like to open a url (or in this case open a hidden div) from one of the top parent nodes, but I cannot seem to work out how to do that as the top element will not allow it.
  
  I have looked at the SINGLE_LINK properties in the js file and tried to append them to the header elements but to no success.
  
  Can anyone help. Thanks

  
  

• At 31 March '09 - 17:29 Jeff Reichenberg wrote:

  

  Marco – this is very helpful.
  
  One gripe — I have my own id and class attributes on my elements, and the accordion js blows them away. Any way to just have it append its needed classes to the class attribute and leave the id alone?

  
  

• At 06 April '09 - 06:20 Esha wrote:

  Hi Marco,
  Great tool.
  
  I am using autocomplete inside one of panels. the moment i enable some other panel, the autocomplete disappears. Could you please tell me what can be possible solution to this ASAP. Also, i am using some other CSS as well for the page layout. Seems there some conflict n most of images of the page CSS are not visible at times.
  
  Thanks
  Esha

  
  

• At 05 May '09 - 15:20 Charles Scott wrote:

  

  I installed this and it is working nicely. I am using the template from the “menu” folder. However, it does not let me have sub-menus under my sub-menus. How do I do this? I looked at the template under the “nested” folder. It allows nested entries, but is not properly layed out for a menu situation.
  
  Ideas?

  
  

• At 27 May '09 - 08:13 Ben wrote:

  

  hi,
  
  great piece of coding! im echoing a previous question because i really need this functionality and im no coder:
  
  Is it possible to have a heading element with submenu child items also be a link? I’m working with someone who feels strongly that there is the potential for confusion on the part of a visitor if a click doesn’t take them to a new page, so I need to create a sort of summary page when a top level menu item is clicked. Neither the jQuery or the YUI versions seem to allow an element to be both an accordion expansion trigger and a link.
  
  thanks in advance
  
  Ben

  
  

• At 29 May '09 - 01:58 yaoming wrote:

  

  the way i has had gone!

  
  

• At 09 June '09 - 15:09 Alvin Ubiera wrote:

  

  Thanks for the great widget. Works like a charm. I’d like to know if it is possible to put something other than raw text inside the toggle element. If I put a paragraph, an image or another div element inside the toggle DIV, the toggle action doesn’t work.
  You can take look at what I’m trying to do here:
  
  http://obinsa.com.do/sitio/proyectos/tur..
  
  code at http://pastebin.com/m72a4573d

  
  

• At 25 June '09 - 04:54 Ben wrote:

  

  one month on…
  
  hi,
  
  great piece of coding! im echoing a previous question because i really need this functionality and im no coder:
  
  Is it possible to have a heading element with submenu child items also be a link? I’m working with someone who feels strongly that there is the potential for confusion on the part of a visitor if a click doesn’t take them to a new page, so I need to create a sort of summary page when a top level menu item is clicked. Neither the jQuery or the YUI versions seem to allow an element to be both an accordion expansion trigger and a link.
  
  thanks in advance
  
  Ben

  
  

• At 29 June '09 - 03:45 dhanya wrote:

  

  how to avoid expansion of panes in each refresh of a page in accordion

  
  

• At 05 July '09 - 05:10 Krishan wrote:

  

  Hi Marco,
  
  Is there a way to enable 2 items to be given as expanded on load?
  
  I tried “, expandItem: 1, expandItem: 0”, but its the second one thats expanded on load.
  
  Thanks

  
  

• At 15 July '09 - 02:24 math in poker wrote:

  

  Nice piece of Code! Thank you! But…
  Is there a way to expand the accordion to the full extent of the text loaded (like mackster25 asked above?) That would be great, because the text I load can have big differences in length, from a few rows up to 40 or even more, so the workaround with overflow: scroll is a little cumbersome…
  I played already a little bit around with the code, but with no success…
  http://www.winningpokermath.com/

  
  

• At 30 July '09 - 05:28 Simon Dahl wrote:

  

  Hi Marco
  
  Firstly I want to thank you profusely for this awesome widget, you literally saved me hours of debugging a commercial script to do what I am doing with this (ie build a menu with expanding subheadings as per your one example) and the commercial script would not line up sub menus properly
  
  Secondly I just had to comment that for some reason I could get a handle on the colour of the text for elements with sub menus (ie aren’t links themselves) but for top level linking elements I had to add a style attribute to the links to get them to appear consistent across headings and links (if that makes sense). I am sure it is something I missed in the sam skin css but anyway a million thanks.
  
  Now if you can just show a demo where I can get a slide show going similar to highslide using this I would be able to finish a site I am struggling with. Cheeky I know but I gotta ask :) – I am more of a server side programmer though I get css and dom (from back end xml programming) I struggle with javascript through unfamiliarity – Although the [site] owner is prepared to pay for the highslide script I would prefer one api/library to use and this is fiendishly easy and expandable. and man I just love the open source BSD ethos
  
  thanks again for releasing this under bsd, a true scholar and gentleman

  
  

• At 09 August '09 - 07:16 lovely rachel wrote:

  

  this is so so so so so so genius! i am going to use it and i never would have been able to create this. thanks for creating this. yay open source!!!

  
  

• At 15 September '09 - 10:28 Ed Rooney wrote:

  

  First off – awesome work – thank you for sharing this with us.
  
  I am having a bit of a problem – when my page loads I am getting a javascript error from line 343 of accordionvie.js:
  
  var eLink = this._panels[oAttr.expandItem].firstChild;
  
  The error reported is:
  
  “this._panels is null”.
  
  you can see the page here: http://dawn.vtwebproperties.com/testpage..
  
  thank you!

  
  

• At 16 September '09 - 12:26 Ed Rooney wrote:

  

  Sorry for the double post – I figured it out.
  
  I do, however, have another issue regarding styling of the nested accordions. Is there a way to provide distinct style to a nested accordion?
  
  I am applying a .png background with some transparency, but the nested accordion ends up with two copies of the image, making the background darker.
  
  Thanks in advance.

  
  

• At 18 November '09 - 10:18 Jim wrote:

  

  wonderful widget, thanks so much.
  
  just wanted to say i ran into the same issue as Dietrich previously posted, and the fix suggested also cleared up the behaviour. Since i just recently downloaded the tool, thought i’d mention that may still be a potential issue.
  
  Basically, if you have a nopanel item on a nested accordian it shows the item in the nested accordian (good) as well as on the parent accordian (not so good). Previous post, for reference:
  
  Wonderful work Marco!
  
  I ran into a problem using “nopanel” on a nested accordion. Moving the test for the parent element in initList() so it happens before the test for nopanel seems to fix it.
  
  Dietrich

  
  

• At 07 December '09 - 15:27 Andrew Crawford wrote:

  

  Thanks for the great widget. It does everything I want … except, I am having trouble integrating it with YUI Menu. I am using a YUI menu top nav. As soon as I include utilities.js, it kills the menu. I have tried playing with the order, including utilities.js earlier or later in the page, with no joy. Any suggestions?

  
  

• At 08 December '09 - 18:45 Lazaro wrote:

  Thereis a BUG!!!, in initList() function that let a nopanel element appears in every ancestor beside its father
  
  To fix it change the FOR loop as follows:
  
  for(var i=0;i

  
  

• At 08 December '09 - 18:51 Lazaro wrote:

  Sorry, the previous answer was cut , a shorter one :
  
  add this code at the begining of the ‘if()’ refering ‘nopanel’:
  
  aListItems[i].parentNode === el

  
  

• At 09 December '09 - 14:32 Andrew Crawford wrote:

  

  It looks like the utilities.js also breaks treeview.

  
  

• At 01 February '10 - 11:29 Keith wrote:

  

  I was wondering how I could implement nested menu items. Ideally I would like to use your state-saving example (redux2) but have the ability to have multiple nested lists that all have the accordion effect. Can you help me with that at all? An example on your demo page would be awesome!

  
  

• At 24 February '10 - 14:02 Jeff Reichenberg wrote:

  

  Hi,
  
  I commented a few months ago about the inconvenience of the accordionview component dynamically creating the “link” and “content” container elements when the accordion is created from existing markup (and how any existing CSS classes or ids on those elements are lost when the accordionview throws them away and creates its own).
  
  I recently came across two more downsides of this approach:
  
  1) If any input type=“password” fields are in the accordion panels, any existing value of those fields are lost in IE due to a very subtle IE bug/limitation where innerHTML does not include the value field of input type=“password” elements (incl. IE8)
  
  2) If a YUI Panel is in the content area of an accordion panel, and the YUI Panel object is init-ed prior to accordion init, it has a problem in IE. This is because the YUI Panel object builds a hard reference to its “element” value (see container.js, buildWrapper function). Once the accordion view is done blowing away and recreating the panel content HTML during its init, this reference inside the Panel object still points to the old version of the element, not the one just created.
  
  I’m sure other subtle bugs exist here, as well.
  
  I hacked together a workaround inside accordionview.js#addPanel where if appropriate elements are already present in the markup they are not dynamically created. It appears to work.
  
  Just FYI in case further work is being done on the accordionview….

  
  

• At 26 February '10 - 07:06 Ian Munday wrote:

  

  I was having problems with getting a popup YUI Calendar to work within the accordian. The javascript error I was getting was:
  
  E.Dom._inDoc is not a function
  http://yui.yahooapis.com/2.8.0r4/build/y..
  Line 9
  
  I noticed the version of utilities.js bundled with AccordionView was 2.5.2, yet I was using YUI 2.8.0rc4 everywhere else. I therefore changed my source to import:
  
  instead of:
  
  Everything then worked as it should.
  
  Marco – great widget btw!
  
  Regards,
  
  Ian

  
  

• At 26 February '10 - 07:08 Ian Munday wrote:

  

  Sorry, my script code has been stripped (quite rightly!). The source change was to:
  
  http://yui.yahooapis.com/2.8.0r4/build/u..
  
  instead of:
  
  accordionview/utilities.js
  
  Regards,
  
  Ian

  
  

• At 21 April '10 - 08:55 Marian wrote:

  

  Hi Marco,
  
  I’m using your accordion widget for my website and it works like a charm
  except for that I want to place different kinds of text in my toggle element.
  Is this possible? If I put a span or div there, the toggle action doesn’t work..
  
  I saw that someone else asked you the same question, is there a solution for this problem or not?
  
  Many any thanks in advance!!!
  Kind regards,
  
  Marian

  
  

• At 22 April '10 - 11:01 Roger Hampson wrote:

  

  I have coded “A Menu” according to the instructions on your YUI AccordionView widget page in a new site I am developing, but when I run it in MS Visual Studio 2008, I get the following error message.
  
  JScript runtime error: YAHOO is undefined
  
  It is referring to the statement that instantiates the accordionview menu.
  
  I have scoured the .zip download files for some form of reference back to the Yahoo site that I should have included, but can’t find one.
  
  Any suggestions?
  
  Roger Hampson

  
  

• At 12 May '10 - 07:25 Stef wrote:

  

  Hi,
  
  Can this accordion also be implemented in Posts

  
  

• At 28 June '10 - 12:12 Amy Leblanc wrote:

  

  I am having the same issue as reported above. I have implemented (site-wide) YUI Menu, but when I try to then use Accordionview it breaks the Menu on pages where I have included utilities.js. Has any resolution been reported on this problem?
  
  Thanks for the great widget!
  
  Am

  
  

One or more comments are waiting for approval by me.

Got something to add to this?

Feel free to leave a comment on this site. You can use Textile and Emoticons. Your email address is only used to show a gravatar. Please stay on-topic and use common decency. Spammers will be shot in front of a live studio audience.

If you plan on posting code, use pastebin please and post a URL to the code. The comment processing doesn't deal very well with code. Sorry for the inconvenience.

Human comment spammers: don't bother posting your crap here. Comments are moderated and I won't let any of your shit through.

Trackbacks

• Earlier musings
• Mass Effect - The best Space Opera of all time (2)
• Yup, Yet another JQuery Accordion Plugin (81)
• Week In Links: a WordPress plugin for link digest posts (1)
• Technorati: What happened to you? (1)
• Some random thoughts about the iPad (1)
• Bookalicio.us version 2.0: an attempt to design the prettiest book blog on the net (3)
• Me, version 2.0. Released! (15)
• PreDevCamp SF Bay Area at Palm HQ - a videoblog (6)
• Me, version 2.0, almost done (2)
• Why I choose the Palm Pre to be my next mobile phone (6)
• What's up with the blogosphere lately? Tired of list-posts! (11)
• Create your own Twitter image badge with PHP (13)
• Five reasons why I hate Facebook (with a passion) (176)
• 5 things MySpace could do to improve Profile 2.0 (1)
• MySpace looking mighty fine with Profile 2.0 - How I built a MySpace profile that doesn't suck (3)

• Tumblr
• Popaganda
• "I come across as miserly because after nearly dying I have realized that life can be taken away at..."
• "I refuse to believe in a god who is the primary cause of conflict in the world, preaches racism,..."
• Photo
• somethingintellectual: This too, kay? The zombie apocalypse is...
• Search terms in the access log of Bookalicious.
• Photo
• "Moderate drinking, which is defined as one to three drinks per day, is associated with the lowest..."
• *SIGH*
• Hope. Delivered.
• Gran Turismo 5 porn
• The best mobile OS on the planet is getting even better!
• stfuteabaggers: revolutionnow: technipol: Clay Bennett does...
• Photo
• visit me on Tumblr

• Tag Universe
• ajax blog bloggers blogging blogosphere blogs browser browsers clock cms code comment-spam comment_spam css design dutch firefox flickr google hype internet islam javascript mac mint pagerank performance photography php php5 pivot pivot-blacklist pivot_blacklist powerbook programming prototype rails referrer+spam referrer_spam rss spam spammer spammers taggerati tags technorati template trackback typo variable web+2 web_2 web_development weblog weblogs website wordpress xhtml yahoo yui (all)