====== StepByStep Plugin ======

---- plugin ----
description: Displays step-by-step tutorials, spoilers, or more information about a topic
author     : saggi 
email      : saggi@gmx.de 
type       : syntax
lastupdate : 2023-09-25
compatible : Jack Jackrum
depends    : 
conflicts  : 
similar    : hidden,spoiler,hide,folded
tags       : hidden,spoiler

downloadurl: https://github.com/saggi-dw/dokuwiki-plugin-stepbystep/zipball/master
bugtracker : https://github.com/saggi-dw/dokuwiki-plugin-stepbystep/issues
sourcerepo : https://github.com/saggi-dw/dokuwiki-plugin-stepbystep/
donationurl: 

screenshot_img : https://i.ibb.co/mX9qSrw/2023-07-19-15h53-24.png
----

===== Installation =====

Install the plugin using the [[plugin:extension|Extension Manager]] and the download URL above, which points to latest version of the plugin. Refer to [[:Plugins]] on how to install plugins manually.

==== Requirement ====

:!: [[config:defer_js|Configuration Setting: defer_js]] must be set to true!
===== Examples/Usage =====

The purpose of the plugin is to display information (as a box) that can be expanded by clicking on it to show more details.

A simple box with title is created this way:

<code>
#: Title of the hidden content
Hidden content goes here
:#
</code>

The Image shows the following:

<code>
#: Step 1
If you already know this, you can also continue with [[#step 3]].

more text...
:#

#: Step 2
Much more Text... 
:#

#: Step 3
Finally done :-)
:#
</code>

Looks like:
{{https://i.ibb.co/mX9qSrw/2023-07-19-15h53-24.png?recache}}

===== Syntax =====
There are two start(''#:'', ''##:'') and two end ('':#'', '':##'') tags.
A complete box is created according to the following scheme:
  - Start: ''#:'' '' title'' [''||options''] ''/n''
  - Content: ''content''
  - End: '':#'' ''/n''

The ''title'' is optional, but it makes no sense without a title. Here the DokuWiki markup is not parsed. Each title becomes the anchor of a box, following the naming conventions of DokuWiki. Characters that are not allowed are replaced by ''_''. This also applies to '':''. This makes it possible (e.g. in instructions) to skip steps by specifying the corresponding target step in a link(e.g:''%%[[#step_3|step 3]]%%'' link to a box with title ''Step 3'' on the same page).

:!: Tags must be placed alone on one line.

The ''content'' is optional as well. But it also makes no sense to work without content. The ''content'' understands DokuWiki markup. 

''Options'' are possible in the start tag. These are separated from the title by a double pipe (''||''). Each individual option must be separated from the next by a space.
Currently the following options are supported:

^Value^Description^Example|
|open|expand the box by default|''#: Step 1||open''|
|preview:''xxx''|expand part of the box to the specified height, where ''xxx'' is a css length|''#: Step 1||preview:5em''|
|noframe|removes the border and background, set title to **bold**|''#: Step 1||noframe''|

Options and combinations with ''noframe'':

<code>
#: 2023-09-19: Hello again...||noframe
Lorem ipsum dolor ...
:#

#: 2023-09-15: Hello World 2!||noframe preview:2.5em
Lorem ipsum dolor ...
:#

#: 2023-09-10: Hello World!||noframe open
Lorem ipsum dolor ...
:#
</code>
{{https://i.ibb.co/v428fPF/2023-09-20-14h41-39.png|No frame}}

Nesting of levels is possible.

===== Configuration and Settings =====

There are no additional settings.


The following colors are used and depend on the style chosen:
^Element^Color in style^style.ini|
|Box header background|Neutral background color|''@ini_background_neu''|
|Box header hoovered/opened|The general link color|''@ini_link''|
|Box background|Main background color|''@ini_background''|
|Box Border|The general link color|''@ini_link''|
|Text|Main text color|''@ini_text''|

Those colors are easily changed. The bundled styling plugin available via "admin" -> "template style setting" allows easy changes. Alternatively, one can directly edit [[devel:style.ini|style.ini]] file.



=== Change Log ===
{{rss>https://github.com/saggi-dw/dokuwiki-plugin-stepbystep/commits/master.atom date}}


=== Known Bugs and Issues ===