alloyui.com - Toggler Example

src/documents/examples/toggler/assets/css/basic.css

@@ -0,0 +1,7 @@
+#myToggler {
+	display: block;
+	margin: 15px 5px;
+}
+#myToggler p {
+	padding: 5px 0;
+}

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%;
+}

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
+---
+
+<link rel="stylesheet" href="assets/css/basic.css" type="text/css" />
+
+<h1>Toggler - Basic Sample</h1>
+<h4>Click the Read More button</h4>
+<div id="myToggler">
+	<button class="header aui-toggler-header-collapsed">Read More</button>
+	<p class="content aui-toggler-content-collapsed">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</div>
+</p>
+
+<script id="snippet">
+  <%- @readFile('basic.js', 'javascript') %>
+</script>
+
+<%- @codeFile('basic.js', 'javascript') %>

src/documents/examples/toggler/basic.js

@@ -0,0 +1,9 @@
+AUI().use('aui-toggler', function(A) {
+
+	var toggler = new A.Toggler({
+		container: "#myToggler",
+		content: ".content",
+		header: ".header",
+		expanded: false
+	});
+});

src/documents/examples/toggler/real-world.html.eco

@@ -0,0 +1,26 @@
+---
+ignored: false
+title: Real World
+layout: single-example
+tags: 'toggler'
+---
+
+<link rel="stylesheet" href="assets/css/real-world.css" type="text/css" />
+
+<h1>Toggler - Real World Sample</h1>
+<div id="togglerDelegate1">
+	<h4 class="header aui-toggler-header-collapsed"><code>Expanded</code> Option</h4>
+	<p class="content aui-toggler-content-collapsed">This option has been set to <code>false</code> so that content starts as toggled off on page load.</p>
+	<h4 class="header aui-toggler-header-collapsed"><code>Animated</code> Option</h4>
+	<p class="content aui-toggler-content-collapsed">This option has been set to <code>true</code> so that toggle transitions will animate.</p>
+	<h4 class="header aui-toggler-header-collapsed"><code>Transition</code> Option</h4>
+	<p class="content aui-toggler-content-collapsed">This option controls duration of transition, easing type, as well as callback functions.</p>
+	<h4 class="header aui-toggler-header-collapsed"><code>closeAllOnExpand</code> Option</h4>
+	<p class="content aui-toggler-content-collapsed">This option has been set to <code>true</code> so that all other toggle switches will be set to off when one switch is toggled on.</p>
+</div>
+
+<script id="snippet">
+  <%- @readFile('real-world.js', 'javascript') %>
+</script>
+
+<%- @codeFile('real-world.js', 'javascript') %>

src/documents/examples/toggler/real-world.js

@@ -0,0 +1,15 @@
+AUI().use('aui-toggler', function(A) {
+
+	var togglerDelegate = new A.TogglerDelegate({
+		animated: true,
+		closeAllOnExpand: true,
+		container: '#togglerDelegate1',
+		content: '.content',
+		expanded: false,
+		header: '.header',
+		transition: {
+			duration: .2,
+			easing: 'cubic-bezier'
+		}
+	});
+});