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

3 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!

#12

Sorry to resurrect an old topic -

@EricShulman the +more button at the bottom of the list is not working. Am I doing something wrong?

image
image1145×254 21.1 KB

#13

At https://TiddlyWiki.com, after copying TiddlyTools/Macros/more I tried the following in a new tiddler:

<<more "[tag[Filter Operators]sortan[]]" size:7 id:1>>

and it appears to be working correctly. Some questions that may help:

  • What browser and OS are you using?
  • What version of the TWCore are you using?
  • What is the modification date on your copy of TiddlyTools/Macros/more?
  • Can you post your file somewhere online so I can test it “in situ”?

-e

1 Like
#14

Thanks for the quick response-

hope this helps:
TiddlyDesktop v 0.0.20 (18)
macOS Sonoma 14.6.1
TWCore 5.3.0
try at https://kptko-156.tiddlyhost.com

image
image732×468 42.3 KB

#15

Testing with TW5.3.0 (https://tiddlywiki.com/archive/full/TiddlyWiki-5.3.0) works, so it’s not a TWCore version issue.
and the version of TiddlyTools/Macros/more is up-to-date, so it’s not that either.

The tiddlyhost.com link you provided gives me an error:

401 Forbidden
You don’t have permission to view this site!
If this is your site then login at Tiddlyhost to access it.

One more question:

  • What plugins do you have installed?

-e

#16

This generates a filter syntax error - why?

<<more "[[!is[system]search:*:literal{$(searchTiddler)$}] :filter[enlist{!!tags}prefix:caseinsensitive<tag_selection>] +[!sort[erstellt]]]" template:more-link size:7 id:2>>

#17

In the filter parameter, you have an extra [ at the beginning, and an extra ] at the end. It should be:

<<more "[!is[system]search:*:literal{$(searchTiddler)$}]
   :filter[enlist{!!tags}prefix:caseinsensitive<tag_selection>]
   +[!sort[erstellt]]" template:more-link size:7 id:2>>

-e

#18

Ok, now it is ok - nice.
Thanks for quick response, @EricShulman

#19

Clicking on “more” in the list of a search, it will show me the next entries.

If I do a new search, “more” remains open and doesn’t switch back to “less” (folded).
It has to be done manual.

How can that be fixed?

Thanks, Stefan

#20

Try this:

\define showMore()
<<more "[!is[system]search:*:literal{$(searchTiddler)$}]
   :filter[enlist{!!tags}prefix:caseinsensitive<tag_selection>]
   +[!sort[erstellt]]" template:more-link size:7 id:2>>
\end

<$let searchTiddler="$:/temp/mysearch" moreTiddler="$:/temp/TiddlyTools/more">
search:
<$edit-text tiddler=<<searchTiddler>> tag="input"
   inputActions="<$action-deletetiddler $tiddler=<<moreTiddler>>/>"/>
<$button>clear<$action-deletetiddler $filter="[<searchTiddler>] [<moreTiddler>]"/></$button>
<<showMore>>

Notes:

  • The “more” state is tracked in $:/temp/TiddlyTools/more
  • The search input field has inputActions that resets the more state on each keystroke
  • I’ve also provided a “clear” button to reset both the search input and the more state.

enjoy,
-e