General Shortcode Shortcode Usage

Shortcodes are not case-sensitive.

Just embed your annotation within the btw shortcode.

Code: [btw]Easy as pie![/btw]
Result: + Easy as pie!

Shortcodes can be nested. No need to manually define the nested layer. No depth restrictions. However, keep an eye on matching opening and closing shortcodes, for there will be no automatic correction when you forget to close a shortcode.

Code: [btw]First level.[btw]Second Level.[/btw][/btw]
Result: + First level. + Second Level.

Optional Annotation Attributes

All attributes can be combined in any way. Attributes are not case-sensitive. If you don’t specify any attribute values, defaults are loaded. Here’s an overview of all attributes and their default values:
[btw state="collapsed" labelexpanded="-" labelcollapsed="+" tooltipexpanded="Collapse annotation" tooltipcollapsed="Expand annotation" mybuttonclass="" myannotationclass=""]Annotation text.[/btw]


Initial visibility of an annotation. Annotations can be defined to be initially expanded or collapsed (default) by adding the state="expanded" or state="collapsed" attribute.

Code: [btw state="expanded"]On page load, this annotation is already expanded.[/btw]
Result: + On page load, this annotation is already expanded.


Label for expanded click buttons (which toggle annotation visibility). If you want to change text appearing on the button, add the labelexpanded (for labels on expanded buttons) and/or labelcollapsed (for labels on collapsed buttons) attributes. You can use html special characters, but html tags will be removed. Default values are "+" and "-".

Code: [btw labelcollapsed="»" labelexpanded="«"]See?[/btw]
Result: See?


Title of toggle buttons. You can freely change the title for expanded and collapsed buttons by specifying the tooltipexpanded and/or tooltipcollapsed attributes. Defaults are "Collapse annotation" and "Expand annotation".

Code: [btw tooltipexpanded="Click me!" tooltipcollapsed="Click me again!"]The tooltip uses the title html attribute.[/btw]
Result: + The tooltip uses the title html attribute.


Last, but not least, you can add any custom CSS classname for single shortcodes: use mybuttonclass for buttons and myannotationclass for the actual annotation text. Defaults are empty.

Code: [btw mybuttonclass="mybutton" myannotationclass="myannotation"]Just a slight change in CSS style in this example.[/btw]
Result: + Just a slight change in CSS style in this example.

Global Switches for Hiding and Displaying Annotations

There are three more shortcodes for hiding, showing and resetting all shortcodes and toggle buttons on a page. Each supports two optional attributes:

  • tag="$value" specifies the html tag for the switch (defaults to "a")
  • label="$value" sets the switch label (defaults to "Hide all annotations", "Show all annotations" respectively "Reset all annotations")


Hides all annotations and toggle buttons.

Code: [btw-quiet]
Result: Hide all annotations


All annotations are displayed and all toggle buttons are hidden.

Code: [btw-chatty]
Result: Show all annotations


Resets all buttons and annotations to their initial state.

Code: [btw-reset]
Result: Reset all annotations