How hard is it to create a details-summary style widget?

#1

One of the things I find myself using a lot is the details disclosure html element to make quick collapsible sections of text.

In the past I’ve tried to simplify this by making a macro that just, uses the same text, however it was fairly clunky, and was incapable of being nested further than (if I remember right) two levels in, significantly limiting what could be done with it.

So, is creating my own widget with the same function possible?

Something along the lines of:

<$details class="" summary="HelloThere" summaryClass="" state="open" id="" etc...>

Body text here.

</$details>
#2

Hi Justin,
Personally, I found it rather hard, so I would suggest you have a look at my solution before you start to work on your own. It is not new but it might be close to what you want:
https://tid.li/tw5/plugins.html#%24%3A%2Fplugins%2Ftelmiger%2Fdetails

Feel free to re-use what seems useful to you and let me know how it goes. :wink:

Cheers, Thomas

1 Like
#3

This is probably a Lot further than I would have gotten on my own, this is great!

I’ve only taken a quick peak at the JS of it, but I noticed it doesnt seem to have a way to accept custom classes for the details or summary element

Did I miss that by skimming or is it something that would need to be added?

(Also, thank you for making and sharing this, I really need to learn how to write vanilla js :sweat_smile:)

#4

You did miss that. :joy:

Check out the documentation and the example tiddlers:
https://tid.li/tw5/plugins.html#DetailsWidget:DetailsWidget%20[[Details%20Basic%20Examples]]%20[[Details%20Advanced%20Examples]]

(I suggest you drag them into your own wiki to play with the examples.)

You will see, there is a class attribute – even with predefined styles.

Enjoy!

1 Like
#5

@Justin_H I have used @telmiger $details widget, for some time, but I have recently studied using the new custom widgets.

  • I will share it here soon, although not of publishing quality yet. See $:/PSaT/$.details/examples and $:/PSaT/$.details/design-notes, it may be a good start, do let me know issues or features you want.
  • It is still a work in progress, examples include tiddlers not in the package, the documentation and testing is incomplete. Although basic nested details work with normally open/closed and toggles working.
  • It is an attempt at a complete and sophisticated solution but is a work in progress.

custom-details-widget.json (8.7 KB)

  • I am working on the provision of a state toggle.
#6

The Subsume Plugin — Turn links into sliders! (macro, not a widget, but can nest any number of levels down, and you can add captions, too. Includes an editor toolbar button to insert it)

1 Like