My Style Guide <%= title %>

This is an example of our base font style 16px. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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.

49 |

50 |

51 | 52 |

53 |

54 |

55 |

<%= block[:title] %>

60 |

61 |

62 |

63 | 64 |

Yo, I got some content to show you. Lorem ipsum occaecat eiusmod Ut et sit sint quis qui labore in exercitation 17 | esse. Lorem ipsum in aliquip esse anim aliquip ullamco sit dolor in deserunt eu labore. Lorem ipsum magna 18 | officia in laborum fugiat proident cupidatat in ex aliquip velit officia nulla aliquip ut. Lorem ipsum 19 | nostrud ad Ut nulla velit qui esse tempor Excepteur consectetur pariatur enim. 20 |

21 | ``` 22 | 23 | ```js_example 24 | $(document).ready(function () { 25 | $('.toggle').truliaToggle(); 26 | }); 27 | ``` 28 | 29 | Below are some methods you can also call on the toggle component and events you can listen to: 30 | 31 | method | description 32 | ----------------|------------------------ 33 | `toggle` | Toggle the tooltip. Optional boolean argument to force active. Example: `$('.toggle').truliaToggle('toggle', true)` 34 | **events** | 35 | `toggle` | Listen to this event to perform an action when the toggle has changed state `$('.toggle').on('toggle', function (e, active) { if (active) console.log('I\m Active!') })` 36 | 37 | */ 38 | 39 | ;(function ($) { 40 | var setArrow = function($el) { 41 | if ($el.hasClass('toggleArrow')) 42 | { 43 | $el.toggleClass('toggleArrowActive'); 44 | } 45 | }; 46 | 47 | var methods = { 48 | init: function () { 49 | return this.each(function () { 50 | if ($(this).data('toggleInit') !== true) { 51 | //Prevent multiple initializations 52 | $(this).data('toggleInit', true); 53 | 54 | $(this).click(function (event) { 55 | event.preventDefault(); 56 | methods.toggle.apply(this); 57 | }); 58 | } 59 | }); 60 | }, 61 | 62 | toggle: function (activate) { 63 | return $(this).each(function () { 64 | var $toggle, 65 | data, 66 | container, 67 | toggled = false; 68 | 69 | $toggle = $(this); 70 | 71 | container = $($toggle.attr('href')); 72 | 73 | if (activate || activate === false) 74 | { 75 | // forced state toggle 76 | toggled = container.hasClass('hideVisually') === activate; 77 | $toggle.toggleClass('toggleActive', activate); 78 | container.toggleClass('hideVisually', !activate); 79 | } 80 | else 81 | { 82 | // toggle 83 | toggled = true; 84 | $toggle.toggleClass('toggleActive'); 85 | container.toggleClass('hideVisually'); 86 | } 87 | 88 | if (toggled) 89 | { 90 | // update arrow status 91 | setArrow($toggle); 92 | 93 | // update the label 94 | data = $toggle.data(); 95 | if (data.toggleText) { 96 | var show = data.toggleText; 97 | 98 | //store our current text 99 | $toggle.data('toggleText', $toggle.text()); 100 | 101 | //switch to our toggle text 102 | $toggle.text(show); 103 | } 104 | 105 | $toggle.trigger('toggle', [(activate || $toggle.hasClass('toggleActive'))]); 106 | } 107 | }); 108 | } 109 | 110 | }; 111 | 112 | $.fn.truliaToggle = function (method) { 113 | if (typeof method === 'string' && typeof methods[method] === 'function') 114 | { 115 | return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); 116 | } 117 | else if (typeof method === 'object' || !method) 118 | { 119 | return methods.init.apply(this, arguments); 120 | } 121 | else 122 | { 123 | $.error('Method ' + method + ' does not exist on jQuery.truliaToggle'); 124 | } 125 | }; 126 | 127 | }(jQuery)); 128 | --------------------------------------------------------------------------------

h1 36px

h2 25px

h3 20px

h4 18px

h5 16px

My Style Guide