Show a partial list with an expandable "more" section

#1

Is there either a built-in widget/macro or a well-known community tool to take a potentially long list and show the first few, adding an expandable section with the remainder hidden behind a show/hide toggle listing how many more are in the list?

For instance, perhaps I want to show up to five elements, but if there are more than five, to show the first four and an indicator of how many remain, turning


One Two Three Four Five Six Seven Eight Nine Ten

Into something like


One, Two, Three, Four, (► and 6 more)

which you can always toggle with


One, Two, Three, Four, (▾ hide) Five, Six, Seven, Eight, Nine, Ten

If there’s not, I will try to build one myself, but I didn’t feel like reinventing the wheel if there’s already a round-enough one available. :wink:

#2

see TiddlyTools/Macros/more and TiddlyTools/Macros/more/Info

For the example you posted, you would write:

<<more "One Two Three Four Five Six Seven Eight Nine Ten" 5 template:more-comma>>
3 Likes
Good Practice to Share TiddlyWiki Solutions and Tools
#3

For the giggles (quickly put together with code I already had for task-management, so pay no mind to my class labels):

<style>
.todo ftodo {display: none;}
.todo:hover ftodo {display: inline;}
</style>

<span class="todo">
<$list variable="thisGuy" filter="[all[tiddlers]first[30]]" counter=count>
<$list filter="[<count>compare:integer:lt[4]then<thisGuy>]">
{{!!title}};
</$list>
<$list filter="[<count>compare:integer:eq[4]]">...</$list>
<$list filter="[<count>compare:integer:gt[3]then<thisGuy>]" >
<ftodo>{{!!title}};</ftodo>
</$list>
</$list>
</span>
#4

Thank you both. Both tested, both are working for my use-case. Not sure which I’ll use yet, or whether I’ll just try to learn enough from them to do my own, but I very much appreciate the help.

#5

The hover thing, not a good choice for touch devices.

1 Like
#6

@Scott_Sauyet in addition to the examples so far, there are ways to leverage html and CSS behaviours, especially in tables, using “overflow” to give rise to content pages. ie makes scrollable or multipage click for next content.

In some cases this may be enough

  • but you need to set the hight as well.
.myclass {
  overflow: auto;
}
#7

Thank you. These are techniques I use often. I don’t think they’re appropriate for this use-case, but they work well in many scenarios.

#8

Wow this is a great macro! Thanks!

Is it possible to combine this with transclusion? Where each item in the list is a tiddler and I want from the long list of tiddlers to display the text from only first 10 or so?

#9

The template param can specify a custom tiddler that defines the desired output for each item (the <<currentTiddler>> value). To transclude the content of each matching tiddler, just create a separate tiddler (e.g., “MyMoreTemplate”), containing something like this:

<$link/><blockquote><$transclude/></blockquote>

Then, invoke the macro like this:

<<more "your filter here" template:"MyMoreTemplate">>

enjoy,
-e

1 Like
#10

I’ve just updated TiddlyTools/Macros/more.

It now provides a pre-defined more-transclude macro template, so you don’t need to add a custom template tiddler for showing transcluded content. You can just write:

<<more "your filter here" template:more-transclude>>

enjoy,
-e

2 Likes
#11

Both your suggested template and your updated more macro worked perfectly for me! I ended up using both, your macro by default and the template when I wanted to transclude a different field instead of the text. Thanks a lot!