Ok - this is actually than an other question: is there an addon which helps to define new buttons for the Edit Toolbar ?
TextStretch works just fine up to the point to where quotation mark - " - are part of the text you want to hide … so TextStretch does not always wok for longer text where you have quotation marks often integrated 
… a pity
IF the text has no single quotes you can use those instead. Try it, it should work …
<<strex 'content' 'label' 'start' 'end' 'class' 'id'>>
1 Like
It could work, I think, by adding the code to the editor’s “Stamp” tool. No extra button required. It can be laid out as needed.
1 Like
I recently wrote a show code macro that displays the current content as code, and stops when it reached <!-- end code -->, or displays all code, and then renders the tiddler.
For example
\function disp() Display this as code
<!-- end code -->
Then when you use;
<<show-code>>
It displays the code upto the `<!-- end code -->`
but also renders the whole tiddler.
So what if we have a more macro
This is the initial text, abstract etc...
<<more>>
This is more
Then it would display;
This is the initial text, abstract etc...
more...
then clicking more will show the rest of the tiddler?
- FYI: It will need a cascade template, and a way to identify tiddlers using more or hide-body=yes
1 Like
You can also try triple double quotes like this:
<<strex """content""" """label""" """start""" """end""" """class""" """id""">>
Fred
1 Like
See the docs: How to create dynamic editor toolbar buttons
so for bold in the text field it is
<$action-sendmessage
$message="tm-edit-text-operation"
$param="wrap-selection"
prefix="''"
suffix="''"
/>
what would it be for the read more button ?
something like this:
<$action-sendmessage
$message="tm-edit-text-operation"
$param="wrap-selection"
prefix="<<strex 'content' '...' '' '' 'standardcolor' >>"
suffix=" "
/>
The tm-edit-text-operation has more info about the possibilities: https://tiddlywiki.com/#WidgetMessage%3A%20tm-edit-text-operation
There is a insert-text where you do not need the prefix and suffix definitions
thanks … but still paragraphes do break the function
It looks like the macro isn’t designed to handle paragraphs…
I had a look at the code but I couldn’t fix it, sorry.
Fred
I am building a solution for the more operation based on this above Read More... function - #12 by TW_Tones but the devil is in the details, It responds to the existence of the comment <!-- more --> by displaying what is above when viewing the tiddler and also what’s below once you click more.
- I need to simultaneously turn the logic upside down so if
<!-- more -->is not present you just get the more button, and click shows the whole body.- I presume this is a desirable use?
- Or should it display the first paragraph?
Hopeful I can share the solution tomorrow.
- It makes use of an approach I only recently developed, that makes it quite simple to use, so I hope it will be quite compelling.
2 Likes
I’d be uncomfortable with that.
In HTML that is usually a comment. Can’t you use some non-HTML syntax?
UPDATE: I re-read your posts and see you are going a way that is better! Excuse my mis-reading.
That said.
What is the big deal with “disclosure” tools? Haven’t they been done already?
Just a comment
TT
1 Like
I was imagining something like what we see in many interfaces for reviews, or Reddit, etc., where by default any tiddler (or any tiddler with a certain class or tag, say) initially shows only the first few lines, with a “More…” button. Maybe there’s even an alpha gradient fade at bottom, so viewer easily discerns that there’s more “below the fold”.
Honestly, I would like to rework/clone the fold bar so that it works more like that. (I almost never want to see only the title bar, but would love a “show only first 5em of height” toggle…) Not something I can build right now, but I bet it would be popular!
4 Likes
This is the first line of my text
<$details summary=“more”>
This is the rest of my text,
zjjjrjtjjtjtjt
rjjjrjjrjrjrj
ejjrjjtjtjjtjjt
and so on
</$details>
Edit a new tiddler and insert the above …Is that what you wanted?
As written, this suggestion by @jonnie45 relies on telmiger’s details widget plugin. Which I do love, and used to use everywhere… but the simpler html version is more straightforward to recommend since it’s available “out of the box”:
<details><summary>Read more... </summary>
<div>
This is the rest of my text,
zjjjrjtjjtjtjt
rjjjrjjrjrjrj
ejjrjjtjtjjtjjt
and so on
</div>
</details>
(I always include an internal <div> in my stamp for html details, to put contents in block mode if needed.)
You can also add a custom css class, and other styling as needed…
Still, my sense was that the OP might have wanted — or maybe I’m just more interested in 
— a solution that can be imposed at the view-template level on a class of tiddlers.
1 Like
Whoops sorry about that - so easy to forget when functionality depends on a plugin - My Bad 
1 Like
This is a very clever idea! I thought I’d make a rough proof-of-concept in case anyone would like to adopt it and polish it up.
\function visibility() [{$:/config/ViewToolbarButtons/Visibility/$:/core/ui/Buttons/fold-bar}]
\procedure fold() <$action-sendmessage $message="tm-fold-tiddler" $param=<<currentTiddler>> foldedState=<<folded-state>>/>
\whitespace trim
<style>
.folded-preview {
max-height: 10em;
overflow: hidden;
}
.folded-fade {
content: "";
position: relative;
margin-top: -10em;
width: 100%;
height: 10em;
background: linear-gradient(<<color background>>00, <<color background>>), rgba(0,0,0,0);
}
</style>
<div class="tc-reveal">
<$list filter="[<visibility>match[show]]" variable="ignore">
<$reveal tag="div" type="nomatch" stateTitle=<<folded-state>> text="hide" default="show" retain="yes" animate="yes">
<$button
actions=<<fold>>
tooltip={{$:/language/Buttons/Fold/Hint}}
aria-label={{$:/language/Buttons/Fold/Caption}}
class="tc-fold-banner">
{{$:/core/images/chevron-up}}
</$button>
</$reveal>
</$list>
<$list filter="[<visibility>match[show]] :else[<folded-state>get[text]match[hide]]" variable="ignore">
<$reveal tag="div" type="nomatch" stateTitle=<<folded-state>> text="show" default="show" retain="yes" animate="yes">
<div class="folded-preview">
<$transclude tiddler={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/ViewTemplateBodyFilter]!is[draft]get[text]] :and[!is[blank]else[$:/core/ui/ViewTemplate/body/default]] }}} />
</div>
<div class="folded-fade"/>
<$button
actions=<<fold>>
tooltip={{$:/language/Buttons/Unfold/Hint}}
aria-label={{$:/language/Buttons/Unfold/Caption}}
class="tc-unfold-banner">
{{$:/core/images/chevron-down}}
</$button>
</$reveal>
</$list>
</div>
I edited $:/core/ui/ViewTemplate/unfold directly, and you can technically do the same, though a more sophisticated approach would involve creating a new tiddler and fitting it into the View Template Body cascade. It might also be nice to add a configuration setting in the Control Panel to make it easy to change the “preview” height without editing the CSS directly.
3 Likes
Took me a while to get back to this. I was having some trouble with getting this code to behave well across light and dark palettes.
But I think I got a simplified version. It doesn’t mess with colour macro at all, but just imposes an opacity gradient on the content:
Still worth some tweaking… (it doesn’t yet play neatly with viewtemplate elements other than the body), but it’s very cool!
-Springer
Below, pasting the simplified style declarations that seem to be working for me (otherwise keeping everything from Proof-of-concept by @etardiff):
<style>
.folded-preview {
max-height: 12em;
overflow: hidden;
-webkit-mask-image: -webkit-gradient(linear, left top,
left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
</style>
1 Like