Light Switch: Magic JavaScript

Usage

Add data-mjf="lightswitch|return_false" data-mjf_lswitch_id="ELEMENT_CONTENT_ID" id="ELEMENT_ID" to your <a> tag.
Optional:
- If the lightswitch content is to be displayed inline, add data-mjf_lswitch_display="inline" to your <a> tag.
- If the lightswitch content is to be displayed as a table row, add data-mjf_lswitch_display="table-row" to your <a> tag.
- If you don't want the click tag to be styled, add data-mjf_lswitch_use_css="false" to said tag.
Add class="display_block(OR)display_inline(OR)display_table-row OR display_none" id="ELEMENT_CONTENT_ID" to your tag that contains the lightswitch content itself.
Add <script type="text/javascript">$m.wand.lightswitch = true;</script> inside your <body> tag.

Example 1

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<p> <a href="#" data-mjf="lightswitch|return_false" data-mjf_lswitch_id="ls_example_block" id="ls_example_block_link">Display Block</a> </p> <p class="display_none" id="ls_example_block"> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

Example 2

Display Inline (without link styling) Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<p> <a href="#" data-mjf="lightswitch|return_false" data-mjf_lswitch_id="ls_example_inline" data-mjf_lswitch_display="inline" data-mjf_lswitch_use_css="false" id="ls_example_inline_link">Display Inline</a> (without link styling) <span class="display_none" id="ls_example_inline">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span> </p>

Notes

By default the all lightswitches are stored in a cookie for 30 days. This can be disabled by adding data-mjf_lswitch_cookie="false" to your <a> tag).

« Back to the main documentation