How to prevent all reveal widgets in a storyriver getting revealed when only one widget is being clicked

I am using reveal widget to show and hide the text editor field of tiddlers in my modal search window.

When I click on the button of one of the tiddler to reveal the text editor field, all of the tiddlers will show the text editor field simultaneously. Is there any way to reveal only the clicked reveal widget alone.

This tiddler contains the code for the reveal widget.

This tiddler is responsible for the modal search window.

Click on the search & edit modal link in the topbar to see the demo.

@arunnbabu81 when setting the tiddler for the state field using a static tiddler name will mean all reveals have the same state.

To make the state tiddler unique for each reveal (as current tiddler changes) we use a qualify macro eg state=<<qualify $:/temp/abc>>then each reveal has its own unique state tiddler of the form $:/temp/abc-1787847750

Tony

1 Like
<$reveal type="nomatch" state=<<qualify "$:/temp/abc">> text="show">
<$button set="$:/temp/abc" setTo="show" class="mybutton" >
{{$:/core/images/edit-button}}</$button>
</$reveal>

<$reveal type="match" state=<<qualify "$:/temp/abc">> text="show">
<$button set="$:/temp/abc" setTo="hide" class="mybutton" >
{{$:/core/images/edit-button}}
</$button>
{{||Editor for modal search}}
</$reveal>

I tried this code, but its not working
Here is the tiddler link

If the are in or transcluded into the same tiddler the state tiddler generated with qualify will be the same. Use a different parameter in the second state to make it unique within the tiddler.

In this case you may use a matching qualify in the reveal and set= parameter.

<$reveal type="nomatch" state=<<qualify "$:/temp/abc">> text="show">
<$button set="$:/temp/abc" setTo="show" class="mybutton" >
{{$:/core/images/edit-button}}</$button>
</$reveal>

<$reveal type="match" state=<<qualify "$:/temp/abc">> text="show" >
<$button set="$:/temp/def" setTo="hide" class="mybutton" >
{{$:/core/images/edit-button}}
</$button>
{{||Editor for modal search}}
</$reveal>

Did you meant something like this. Is there any examples for such use of reveal widget in the TW documentation or core?

The problem is that your $reveal widgets are occurring inside a $list widget. As a result, they are repeated for each matching tiddler title… but the state=... for each $reveal widget needs to be unique for each tiddler title so that they operate independently of each other.

Try something like this:

<$list filter="[regexp:text<search-text>!sort[created]limit[20]] -[is[system]] -[all[shadows]] -[is[image]]">
   {{!!title||$:/core/ui/ListItemTemplate}} 
   <$let stateID={{{ [[$:/temp/abc/]addsuffix{!!title}addsuffix<qualify>] }}}>
   <$reveal type="nomatch" state=<<stateID>> text="show">
      <$button set=<<stateID>> setTo="show" class="mybutton" >
         {{$:/core/images/edit-button}}
      </$button>
   </$reveal>
   <$reveal type="match" state=<<stateID>> text="show">
      <$button set=<<stateID>> setTo="hide" class="mybutton" >
         {{$:/core/images/edit-button}}
      </$button>
      {{||Editor for modal search}}
   </$reveal>
   </$let>
</$iist>

Note how we use a $let widget to construct a stateID from a base tiddler name ($:/temp/abc/) plus the current title {!!title} and the TWCore <qualify> macro to produce something like $:/temp/abc/TiddlerTitle-123456789 so that each stateID is guaranteed to be unique.

-e

2 Likes

@EricShulman Thankyou very much. It works when I tested in my mobile. Will mark this as the solution after rechecking when I am back on my desktop.
Once again thank you.