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:

    https://gyazo.com/af7b7b96a1935027fbd5d0ec9e98ce00

    • This topic was modified 7 years, 6 months ago by thepageman.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author twinpictures

    (@twinpictures)

    Interesting!

    Some Questions:

    1. do you want the hidden content to expand/collapse under the trigger (squads)?
    2. 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.
    3. 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

    • This reply was modified 7 years, 6 months ago by twinpictures. Reason: Added OrgChart library link
    • This reply was modified 7 years, 6 months ago by twinpictures. Reason: added responsive question
    • This reply was modified 7 years, 6 months ago by twinpictures. Reason: added Simple Org Chart link
    Thread Starter thepageman

    (@thepageman)

    Hey Twinpictures,

    Unfortunately Simple Org Chart isn’t exactly what I am looking for. The second link I posted shows multiple people in a squad and, additionally, I don’t really need an entire user card for each person. Org Chart seems to use people for every node where as here I would like to use the abstract “1ST SQUAD” as a parent node for all the members (of 1st squad).

    To answer your questions:
    1. If you mean the list should be below the 1ST SQUAD then yes.
    2. Stylistically, I wouldn’t like to have anything more than 2 expands away, simply to reduce clicks.
    3. I am not sure. Personally my users won’t be bound by smaller viewports so it wouldn’t be too big of an issue if everything broke on smaller viewports. I imagine you guys will come up with a far better solution than anything I could suggest ??

    Hopefully this provides you with enough of a challenge and thanks for being so willing to help, it is a very pleasant surprise!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Horizontally aligned expandsubs?’ is closed to new replies.