Magic Icon Light Switch: Magic JavaScript

Quick Jump ↵

Usage

Add data-mjf="lightswitch|return_false" data-mjf_lswitch_id="ELEMENT_CONTENT_ID" id="ELEMENT_ID" to your clickable 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. This sets the intial content style.

Add data-mjf_lswitch_display="inline" to your clickable tag if the lightswitch content is to be displayed inline

Add data-mjf_lswitch_display="table-row" to your clickable tag if the lightswitch content is to be displayed as a table row.

Add <script type="text/javascript">$m.wand.lightswitch = true;</script> inside your <body> tag.

Examples

Toggle All → Collapse or expand all lightswitches on a page

<a href="#" data-mjf="lightswitch|return_false" data-mjf_lswitch_all="collapse(OR)expand" id="lswitch_toggle_all">Toggle All</a>

Display Block

Ut at massa aliquam libero porttitor vehicula. Vivamus tristique metus velit. Mauris a quam non tortor tempor laoreet eu sit amet lectus. Suspendisse potenti. Quisque vehicula faucibus lacinia. Proin ligula massa, tristique et fermentum sollicitudin, dictum eget enim. Integer fermentum metus quis libero suscipit in semper lorem ornare. Aenean laoreet, justo a commodo bibendum, lorem nisi rutrum massa, quis gravida dui sapien condimentum eros. Curabitur ac erat massa. Donec pretium pharetra ante ac sodales. Phasellus quam turpis, rutrum vel eleifend pretium, malesuada vel purus. Pellentesque in elit vel urna ultrices cursus sit amet ultrices magna. Curabitur eu enim sit amet risus tempor ultrices quis suscipit lectus. Curabitur id ligula lacus, at porttitor leo. Etiam accumsan condimentum metus vel tempus. Nullam eget mauris felis. Cras pulvinar pharetra sodales. Nunc suscipit turpis neque. Vestibulum ut eros eros, vitae congue enim.

Nam ultricies, quam sed dignissim ornare, enim dolor tristique urna, eget convallis diam magna ac sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam non augue sit amet justo fringilla vestibulum at nec nisl. Nullam massa mi, rutrum non accumsan nec, feugiat aliquam ligula. Proin urna magna, tempor ut blandit in, tincidunt vel massa. Donec semper lorem sapien, at interdum mi. Mauris fermentum tempus lorem at congue. Phasellus dignissim congue nisl in mollis. Aliquam sodales auctor vehicula. Phasellus ut tortor nisi. Quisque velit est, vehicula at auctor ut, blandit a est. Ut in augue arcu. Praesent sed malesuada lectus. In ac interdum nunc. Cras est sapien, scelerisque non mattis aliquam, scelerisque sit amet felis. Curabitur non leo diam. Nunc dictum mauris in erat vehicula aliquet. Fusce sed faucibus eros. Morbi turpis libero, sodales eu lobortis auctor, vulputate a purus. Praesent interdum cursus justo.

Proin eget erat urna. Aenean eu justo id tortor gravida pellentesque non sit amet orci. Integer in massa faucibus turpis rhoncus pretium non sit amet felis. Nam tincidunt cursus augue vel vehicula. In sed arcu quis purus sagittis dignissim. Mauris lacus leo, fermentum nec consequat quis, facilisis ac quam. Nulla facilisi. Proin fringilla leo at lectus ultrices et iaculis dui vestibulum. Pellentesque interdum commodo nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce sit amet orci luctus mi hendrerit dapibus.

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

This example doesn't contain link styling.

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. Proin eget erat urna. Aenean eu justo id tortor gravida pellentesque non sit amet orci. Integer in massa faucibus turpis rhoncus pretium non sit amet felis. Nam tincidunt cursus augue vel vehicula. In sed arcu quis purus sagittis dignissim. Mauris lacus leo, fermentum nec consequat quis, facilisis ac quam. Nulla facilisi. Proin fringilla leo at lectus ultrices et iaculis dui vestibulum. Pellentesque interdum commodo nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce sit amet orci luctus mi hendrerit dapibus.

Notes

Add data-mjf_lswitch_cookie="false" to your clickable tags if you don't want the lightswitch to be remembered.

Add data-mjf_lswitch_use_css="false" if you don't want the click tag to be styled.

Add data-mjf_lswitch_animate_increments="N" if you want to set the animation speed. It defaults to 5 and a higher number slows down the animation. Use 0 to disable to the animation completely.

If you want to use radio buttons, have a look at the CSS Class Update and use the predefined display_none and display_block CSS classes.

Currently only display_block lightswitches are animated.

Checkboxes aren't and won't be styled by default.

« Back to the main documentation