diff --git a/src/documents/examples/toggler/assets/css/basic.css b/src/documents/examples/toggler/assets/css/basic.css new file mode 100644 index 000000000..74359f648 --- /dev/null +++ b/src/documents/examples/toggler/assets/css/basic.css @@ -0,0 +1,7 @@ +#myToggler { + display: block; + margin: 15px 5px; +} +#myToggler p { + padding: 5px 0; +} \ No newline at end of file diff --git a/src/documents/examples/toggler/assets/css/real-world.css b/src/documents/examples/toggler/assets/css/real-world.css new file mode 100644 index 000000000..8043006e9 --- /dev/null +++ b/src/documents/examples/toggler/assets/css/real-world.css @@ -0,0 +1,37 @@ + +#togglerDelegate1 { + display: block; + margin: 20px 5px; +} +.header { + font-size: 24px; + margin: 0; + padding: 5px 0; + width: 75%; +} +.header code { + font-size: 100%; +} +.header:hover, .aui-toggler-header-expanded { + background-color: #ddd; +} +.header:before { + color: #A5A5A5; + float: left; +} +.aui-toggler-header-collapsed:before { + content: "+"; +} +.aui-toggler-header-expanded:before { + content: "-"; + font-size: 120%; + margin: 0 2.5px; +} +.content { + background-color: #eee; + font-size: 120%; + font-style: italic; + margin: 0; + padding: 5px 2.5%; + width: 70%; +} \ No newline at end of file diff --git a/src/documents/examples/toggler/basic.html.eco b/src/documents/examples/toggler/basic.html.eco new file mode 100644 index 000000000..b90d9528c --- /dev/null +++ b/src/documents/examples/toggler/basic.html.eco @@ -0,0 +1,23 @@ +--- +title: Basic +layout: single-example +tags: 'toggler' +category: Toggler +thumbnail: example-autocomplete.jpg +description: Allows users to toggle content on and off +--- + + + +
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
Expanded
OptionThis option has been set to false
so that content starts as toggled off on page load.
Animated
OptionThis option has been set to true
so that toggle transitions will animate.
Transition
OptionThis option controls duration of transition, easing type, as well as callback functions.
+closeAllOnExpand
OptionThis option has been set to true
so that all other toggle switches will be set to off when one switch is toggled on.