Adding accordion effects to other sideboxes

[swguy]

The expand/contract behavior of the categories sidebox would be useful for other sideboxes with nested information as well. But this code is based on the hierarchical nature of cPath variables (1, 1_5, 1_5_12, etc.) so I don't think it can be reused. I'm considering other approaches like jQuery accordion. Any recommendations or things to watch out for?

[DrByte]

If you're using Bootstrap, their "collapse" feature handles accordion displays quite easily just by providing the correct HTML markup:
https://getbootstrap.com/docs/4.5/co...ordion-example
Indeed it's akin to jQuery's similar feature.

I guess the challenge comes when you want the URI to influence what part is opened by default, such as a nested cPath which opens several layers of the categories sidebox.
You could still set some appropriate HTML markup to control the Bootstrap accordion effect though.

The categories sidebox, at least until 1.5.7, fires tons of queries and can sometimes be slow on large sites with a gazillion categories/subcategories. My point: if you're considering cloning it, don't clone that part. :)

[swguy]

LOL. Note to self: do not make new code "slowness-compatible."

[DrByte]

Aside: Strictly speaking the expand/contract effect of the (current) categories sidebox is slightly more of a "tree navigation" effect than "accordion" (insomuch as I often think of accordion not denoting parent/child hierarchy with plus/minus and indentation or sub-element arrows, etc).

[davewest]

Something to look at is tpl_modules_mobile_categories_tabs.php from Responsive Sheffield Blue 1.. I'm still using it. you can see it by resizing my site page. it is accordion style, and would be nice in a side box. It does use a jquery script, but converting to css would be easy with no need for scripting.

[swguy]

Thanks Dave. Good idea!