Horizontally aligned expandsubs?
-
I like the expandsub nesting capability but would like to expand more like a tree, rather than a list.
What I mean by this is that the root expands into three sub lists all horizontal to each other, like so:
I managed to get them to align like so by messing with the display of the entire list. However once expanded, the content text div pushes the other horizontal divs out of whack. The CSS is getting beyond me and was wondering if there was an easier solution? As of right now, I managed to get this going:
-
Interesting!
Some Questions:
- do you want the hidden content to expand/collapse under the trigger (squads)?
- how many levels deep are you planning on going? This could be a very tricky solution if you go more than a few levels deep, as you can imagine.
- how do you envision this working responsively on smaller viewports such as mobile devices?
You are correct, the CSS quickly starts getting quite advanced, however this looks like a fun challenge. It might even be something we might consider creating an add-on for.
We’ll do a bit of research and get back to you with our findings. If you are intrested in participating in an add-on, please consider upgrading to collapse-pro-matic and we’ll work directly with you to implement a simple solution.
Regardless, good question!
Update:
There is a pretty cool jQuery OrgChart library that is 90% of what you need. It could be wrapped into a WordPress plugin (if it has not already been done)Update:
Yup, looks like this is exactly what you are looking for: Simple Org Chart
The topic ‘Horizontally aligned expandsubs?’ is closed to new replies.
