Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Collapsible Panel

edited February 2008 in Vanilla 1.0 Help
Collapsible Panel


  • Uploaded version 1.1 of Collapsible Panel.
  • Now the cookies will persist even if you close your browser.
  • After much troubleshooting, I discovered the Notify extension was causing a conflict or somehow preventing the Collapsible Panel to work.
  • Also, since some extensions do not follow the standard panel layout (Category Filter, Statistics, Live Search, etc) this will not affect them. I suppose it would be an easy tweak to include these anomalies in the slidepanel.js.

    EDIT: I changed the selectors to be more encompassing, basically changed
    var PanelItems = $$('#Panel ul li h2');
    var PanelItems = $$('#Panel h2');

    Which seemed to catch more items in the Panel
  • I've found that the Panel items collapse on the index and categories.php page, but they do not collapse on the post.php or comments.php page.

    EDIT: Iget a JS errorError:
    el has no properties Source File: vanilla/extensions/CollapsiblePanel/slidepanel.js Line: 30

    I added an if(el) {...} to sidepanel.js and everything seems fine.
  • could this be extended to be able to collapse the entire panel? like so the panel becomes thinner off to the side...
  • There is a PanelHider Extension if you want to hide the Panel completely. Looks like it may not be finished though...
  • The PanelHider Extension works for me with the latest version of vanilla. What problems are you having?
  • I am not using PanelHider, I was just going by what it said on the PanelHider Add-on page. The first sentence: "This extension is not yet functional." :)
  • After installing, I realized since it wasn't working, I needed Mootools. I activated that but nothing. Then I realized I had to deactivate Notify. I did and still it didn't work. I get the js error:

    item.setStyle is not a function
    Line 9

    I am using FF on a local install with the Blogger theme. I looked but couldn't find any settings to check off. Are there any?
  • Thanks for that debugging skube, I've been a bit busy recently. I'll try to get those changes included and any further bugfixes by tomorrow. I'll install Notify too and try to work out the compatibility issues. @jimw: There are no settings, the actual PHP part of the extenson that hooks into Vanilla's API is about four lines. Also, you shouldn't need the Mootools extension for this to work (it's recommended though). The extension includes a fallback script that includes all the Mootools pars that it needs. If I had to guess I would say that the error comes from the theme you're using. I forgot to specify the required theme for this extension. The Javascript is quite specific in what elements it targets so chances are it's not finding the panel items successfully. I should be able to get a version out that's compatible with the Blogger theme.
  • Uploaded version 1.2 of Collapsible Panel.
  • OK, implemented skube's bugfixes. The problem with Notify arises because of the prototype/scriptaculous that it uses. Mootools basically cannot be used with those. Changing the order of the scripts will allow one thing to work but will kill the other. The only solution I can think of is to have the Mootools extension remove the prototype/scriptaculous scripts from the header and also replace any dependant scripts with ones that work with Mootools instead. Obviously this will have to be done on a case-by-case basis and may be difficult to maintain what with updates and all but I can see no other way. I will start working on rewriting the notify script and any core vanilla scripts that use it (the only one I can think of is on the role page with the drag n' drop stuff). I'll also make sure I try to keep a list on the Mootools extension's page of which extensions are affected. jQuery extensions should be unaffected as jQuery handily has a built-in 'compatibility mode' which allows it to change its functions' namespaces so they don't overwrite others or get overwritten.
  • That's a pretty cool extension, both useful and elegant. However I have a small problem (or mostly a request) with Nuggets.

    Would there be a way to disable the collapsible menu for specific nuggets? I'd like to show some custom items by default, especially Google Ads or widgets from other sites.
  • If your nugget has a title in the header (within the h2), you could do what I did and skip specific headers. So in the /CollipsiblePanel/slidepanel.js, add the following within the PanelItems.each(function(item)){:
    if(item.getText()=='Your Nugget Title') return;
    Ok, this is a definite hack and disables the option of hiding it by always leaving it open.

    I'm sure Fyorl can figure out something better...
  • If you want I'll add a way to configure it with a list of items you want opened by default. I'll also give the option to have everything opened or closed by default. The question is whether you'd like a nice frontend for it or are happy editing some PHP variables.
  • Sure, some settings for each panel item would be great... But your hack is exactly what I was thinking about. Thanks :)
  • Also, I don't know if you can do anything about it, but I was using Nuggets to put a random photo into the side panel. For some reason however, the photo would only show 45px if it was set to open position. It didn't matter the height of the photo, it was always 45px tall initially. If you collapse and then expand the widget, the entire photo would then display. I couldn't figure out why, thus I ended up forcing it always open.
  • Version number changed from 1.2 to 2.0.
  • Uploaded version 2.0 of Collapsible Panel.
This discussion has been closed.