Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Try Vanilla Forums Cloud product

Ready to contribute?

Amazing! Sign our contributors' agreement and then join us on GitHub.

Update for critical security issue in PHPMailer included in release Vanilla 2.3.1
Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.

Collapsible Panel

This discussion is related to the Collapsible Panel addon.
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.
  • New Description, contains some useful info.

    I'll take a look at the problem with the images when I have some more time skube but thanks for the heads-up.
  • Wow, quick update and neat settings interface, thanks a lot!

    Now if you're still ready for some coding frenzy... I've got something for you :P

    I was playing with Discussion Overview and various addons, trying to turn Vanilla into a kind of blog/forum hybrid, then suddenly thought collapsible categories with Discussion Overview would be freaking awesome.

    Does it sound possible? Something like a simple button next to the category title, allowing to collapse/expand the discussions under the category, working the same way than Collapsible Panel. I guess it would make happy everyone who keeps asking for categories on the front page and make an interesting discussions list alternative (and it would make me very happy too.)
  • If the HTML's already there then making things collapsible is pretty easy (especially with Mootools). From what I can see, Discussion Overview only shows the most recent post in each category so I don't see much point to expanding/collapsing one row. If Discussion Overview showed, say, the 10 most recent posts then I could employ a pretty cool Accordion effect.
  • In fact it shows the ten most recent posts in each category (and there's a setting for the number of posts). The reason why I'd like to make the discussions collapsible in overview mode is because the "block category" option looks quite blunt in my opinion, a bit like if it was about saying "this category sucks, please block it".

    Gently collapsing discussions sounds (and looks) way more friendly than "blocking" in my opinion. And the block option doesn't seem to work with Discussion Overview anyway...

    In my case I intend to use Discussion Overview to display different categories with role-based access: one for official announcements, several allowing comments but no new discussion, one allowing everything, etc. Compared to the "classic" Vanilla setup, the front page would display the five most recent posts of each of the ten (or around ten) categories. That's also why collapsing would make navigation easier for people who don't want a loooong home page.
  • Seems perfectly possible. So you want to allow people to see the first 5 (configurable) most recent posts in a category block but have each of those category blocks collapsible. Presumably you want to prevent people from seeing the categories they cannot view (read access).

    Would you like the same setup as with Collapsible Panels in that their settings would be saved or would you prefer a simpler, Accordion effect which only allows one category to be open at any one time?
  • I was thinking about the five latest posts for each category because I've read in another thread that someone had major speed issues with displaying lots of discussions with Discussion Overview. He really had too much categories and his home page was huge, but in my case the number of categories could grow up quite easily, so I wanted to display a minimal amount of discussions just in case. A configurable amount of discussions would be useful, of course.

    As you said, categories not supposed to be seen shouldn't appear (I've tried CategoryRoles for the more specific access settings and it works fine.)

    About the accordion effect, maybe it could be a user preference. It sounds nice, but if for example a user is especially interested in two categories, he would have to read them one after the other constantly. Collapsed items staying collapsed and expanded items staying expanded sounds more navigation-friendly.

    There would still be some "View all" links for each category block, allowing to go directly to a category's page. Another feature (but this could be a different extension) would be to add a "Browse next category" link at the end of each category page, a bit like Next Unread Discussion but for categories. This way people wouldn't have to come back to the home page to check all posts in a given category.

    Thanks for your time!
  • Hi Fyorl, I've just noticed there seems to be a problem with Collapsible Panel and the categories settings page. Dragging & dropping doesn't work when Collapsible Panel is enabled, and Firebug gives me a couple of errors when I try to re-order categories. Sorry I can't paste them here, I don't have access to my local installation right now.
  • Yup, that's the scriptaculous incompatibility again. I'll try to have that fixed in the next Mootools release.
  • with this extension, if i try an preview a post i get this error

    "Fatal error: Call to a member function on a non-object in /home/virtual/site448/fst/var/www/html/extensions/CollapsiblePanel/default.php on line 31"
This discussion has been closed.