KISS Macro to Create an Accordion

Tips & Tricks
12

This is an updated version of Accordion macro

Code

\define accordion(filter, stateTiddler:01)
<$let stateTiddler={{{ [[$:/state/accordion/$stateTiddler$]addsuffix<qualify>] }}}
      btn-actions='<$action-setfield  $tiddler=<<stateTiddler>> $field=text $value={{{ [<stateTiddler>get[text]match<currentTiddler>then[]else<currentTiddler>] }}} />' >
<div class="accordion">
<$list filter=<<__filter__>> >
<$button class="accordion__title" actions=<<btn-actions>>  tag=div>
<$view field=caption><$view field=title/></$view>
</$button>
<$reveal type="match" state=<<stateTiddler>> text=<<currentTiddler>> class="accordion__content" tag=div>
<$transclude mode=block/>
</$reveal>
</$list>	
</div>      
</$let>
\end

Example

<<accordion "[tag[bem101]]">>

Screenshot

img_096_msedge

Demo

  1. Download kiss-macro-accordion.json (3.8 KB)
  2. Drag and drop into https://tiddlywiki.com/
  3. open Ex051/test

Contribute

  1. Add some animation for smooth sliding
  2. Add other colors
  3. Make it compatible with dark themes
2 Likes