Follow

LazyWeb question: Remember all those easy to use tree-view controls you could insert into a webpage about 20 years ago?

They mostly disappeared, but some companies still use something like them. Take this IBM website, just to serve as an example.

Does anyone know of a contemporary version of this control which is FOSS and easy to use on, say, a static website?

@vertigo we used this at a previous job. I think it'll fit the bill jstree.com/

@vertigo The IBM page is using javascript, but I believe you could achieve the same thing with the details and summary tags.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

@mr64bit It is very close, but it doesn't nest quite right. Thanks for pointing this out though; I had no idea this tag was even a thing.

@Moon @vertigo i tried to be smug and find the ibm list in their react components https://www.carbondesignsystem.com/components/overview but couldnt find it lol

@vertigo that is when people put information for information and not for appearances. Those days...

@vertigo you can easily create a tree view with html and css only codepen.io/kobusvanwykk/pen/Nq

The trick is in the 'input:checked' selector but depending on the use case you might want to try a JavaScript drop in sollution

@vertigo
Yes there is. If you are talking about what we think you are talking about there's an example of this on the web.

Look up "show hide HTML CSS"

Maybe "checkbox hack" or "radio box hack" if the above is fruitless.

@zens PERFECT! That's exactly what I'm looking for! Thank you!

you gotta be more specific about which stack/frontend framework. but the most basic implementation would be to just mirror H1..6 like in a wiki-contents

@dym Preferably, no stack at all; the closest I can come to just static HTML and minimum Javascript content, the better.

(Javascript is OK; I just want to avoid "enterprise"-y stuff, as they tend to have a metric ton of dependencies and stuff. )

@dym Not quite; I wanted something like what IBM had (see o.p.). My plan is to use a common UI to present a plurality of "books", and when you click on a tree item, the alternating pane updates with that item.

@dym Sorry! I forgot to respond to this, as I'd gotten wrapped up in other projects.

If you can take the output of several gitbook or mdBook volumes and place them into a single hierarchy, then yes. My ambition is to have a user's manual, programmer's reference manual, service and assembly instructions, application/engineering notes, etc. all on the same web page for easy reference.

It's one of those things that looks great in my head, but I'd like to try to reify that idea to explore its usability a bit more.

Sign in to participate in the conversation
hackers.town

A bunch of technomancers in the fediverse. Keep it fairly clean please. This arcology is for all who wash up upon it's digital shore.