Last active
August 29, 2015 14:19
-
-
Save rn404/1e80df9a4245c732ca97 to your computer and use it in GitHub Desktop.
JS Bin// source http://jsbin.com/yenaweziru
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| .ui-content .ui-text { | |
| height: 6em; | |
| overflow: hidden; | |
| } | |
| .ui-content.is-open .ui-text { | |
| height: auto; | |
| } | |
| .ui-content.ui-open .ui-text { | |
| height: auto; | |
| } | |
| .ui-btn { | |
| color: #009988; | |
| font-weight: bold; | |
| cursor: pointer; | |
| } | |
| .ui-disable { | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="js-expand-module ui-content"> | |
| <div class="ui-text"> | |
| The dining room by nature is a simple space. Unlike a kitchen or living room, which often has multiple purposes, your dining room is solely about eating and entertaining. Even though you might not use it that frequently, it's great to have during those big family get-togethers or your child's over-the-top birthday party. By adding a large table, plenty of chairs and a bar cart, you can easily turn it into an entertaining mecca — with the right party decorations, of course. Because it's so simple, a dining room is often hard to decorate and renovate. One of the easiest (and only) changes you can make is swapping out your furniture. As the focal point of the room, your dining set should be your biggest investment. Take time to consider what size and style works best for your space, and don't be afraid to splurge — a good dining table can last you decades. Once you have a table sorted out, find ways to add some storage for all that extra dinnerware and barware. And don't forget about the decor! Using fun colors and interesting accessories is an easy way to add personality in a room that can | |
| </div> | |
| <div class="js-expand-toggle-more ui-btn">More</div> | |
| <div class="js-expand-toggle-less ui-btn ui-disable">Less</div> | |
| </div> | |
| <hr> | |
| <div class="js-expand-module ui-content"> | |
| <div class="ui-text"> | |
| The dining room by nature is a simple space. Unlike a kitchen or living room, which often has multiple purposes, your dining room is solely about eating and entertaining. Even though you might not use it that frequently, it's great to have during those big family get-togethers or your child's over-the-top birthday party. By adding a large table, plenty of chairs and a bar cart, you can easily turn it into an entertaining mecca — with the right party decorations, of course. Because it's so simple, a dining room is often hard to decorate and renovate. One of the easiest (and only) changes you can make is swapping out your furniture. As the focal point of the room, your dining set should be your biggest investment. Take time to consider what size and style works best for your space, and don't be afraid to splurge — a good dining table can last you decades. Once you have a table sorted out, find ways to add some storage for all that extra dinnerware and barware. And don't forget about the decor! Using fun colors and interesting accessories is an easy way to add personality in a room that can | |
| </div> | |
| <div class="js-expand-toggle-more ui-btn">More</div> | |
| <div class="js-expand-toggle-less ui-btn ui-disable">Less</div> | |
| </div> | |
| <hr> | |
| <div class="js-expand-module-type-another ui-content"> | |
| <div class="ui-text"> | |
| The dining room by nature is a simple space. Unlike a kitchen or living room, which often has multiple purposes, your dining room is solely about eating and entertaining. Even though you might not use it that frequently, it's great to have during those big family get-togethers or your child's over-the-top birthday party. By adding a large table, plenty of chairs and a bar cart, you can easily turn it into an entertaining mecca — with the right party decorations, of course. Because it's so simple, a dining room is often hard to decorate and renovate. One of the easiest (and only) changes you can make is swapping out your furniture. As the focal point of the room, your dining set should be your biggest investment. Take time to consider what size and style works best for your space, and don't be afraid to splurge — a good dining table can last you decades. Once you have a table sorted out, find ways to add some storage for all that extra dinnerware and barware. And don't forget about the decor! Using fun colors and interesting accessories is an easy way to add personality in a room that can | |
| </div> | |
| <div class="js-expand-toggle-more ui-btn">More</div> | |
| <div class="js-expand-toggle-less ui-btn ui-disable">Less</div> | |
| </div> | |
| <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> | |
| <script id="jsbin-javascript"> | |
| var Expand; | |
| Expand = (function() { | |
| Expand.Module = (function() { | |
| var _options; | |
| _options = {}; | |
| function Module(root, options) { | |
| _options = options; | |
| this.$_elm = { | |
| root: $(root), | |
| more: $(options.elm.more, root), | |
| less: $(options.elm.less, root) | |
| }; | |
| this.isOpen = this.$_elm.root.hasClass(_options.className.open); | |
| this.bind(); | |
| } | |
| Module.prototype.bind = function() { | |
| var _self; | |
| _self = this; | |
| this.$_elm.more.on('click', function() { | |
| return _self.toggle(); | |
| }); | |
| return this.$_elm.less.on('click', function() { | |
| return _self.toggle(); | |
| }); | |
| }; | |
| Module.prototype.toggle = function() { | |
| this.$_elm.root.toggleClass(_options.className.open); | |
| this.$_elm.more.toggleClass(_options.className.disable); | |
| this.$_elm.less.toggleClass(_options.className.disable); | |
| return this.isOpen = !this.isOpen; | |
| }; | |
| return Module; | |
| })(); | |
| function Expand(options) { | |
| var elm, _elms, _i, _len; | |
| this.options = { | |
| elm: { | |
| root: '.js-expand-module', | |
| more: '.js-expand-toggle-more', | |
| less: '.js-expand-toggle-less' | |
| }, | |
| className: { | |
| open: 'ui-open', | |
| disable: 'ui-disable' | |
| } | |
| }; | |
| this.options = $.extend(true, this.options, options); | |
| this.module = []; | |
| _elms = $(this.options.elm.root); | |
| for (_i = 0, _len = _elms.length; _i < _len; _i++) { | |
| elm = _elms[_i]; | |
| this.module.push(new Expand.Module(elm, this.options)); | |
| } | |
| } | |
| return Expand; | |
| })(); | |
| $(function() { | |
| window.expand = new Expand({ | |
| className: { | |
| open: 'is-open' | |
| } | |
| }); | |
| return window.expandTwo = new Expand({ | |
| elm: { | |
| root: '.js-expand-module-type-another' | |
| } | |
| }); | |
| }); | |
| </script> | |
| <script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <div class="js-expand-module ui-content"> | |
| <div class="ui-text"> | |
| The dining room by nature is a simple space. Unlike a kitchen or living room, which often has multiple purposes, your dining room is solely about eating and entertaining. Even though you might not use it that frequently, it's great to have during those big family get-togethers or your child's over-the-top birthday party. By adding a large table, plenty of chairs and a bar cart, you can easily turn it into an entertaining mecca — with the right party decorations, of course. Because it's so simple, a dining room is often hard to decorate and renovate. One of the easiest (and only) changes you can make is swapping out your furniture. As the focal point of the room, your dining set should be your biggest investment. Take time to consider what size and style works best for your space, and don't be afraid to splurge — a good dining table can last you decades. Once you have a table sorted out, find ways to add some storage for all that extra dinnerware and barware. And don't forget about the decor! Using fun colors and interesting accessories is an easy way to add personality in a room that can | |
| </div> | |
| <div class="js-expand-toggle-more ui-btn">More</div> | |
| <div class="js-expand-toggle-less ui-btn ui-disable">Less</div> | |
| </div> | |
| <hr> | |
| <div class="js-expand-module ui-content"> | |
| <div class="ui-text"> | |
| The dining room by nature is a simple space. Unlike a kitchen or living room, which often has multiple purposes, your dining room is solely about eating and entertaining. Even though you might not use it that frequently, it's great to have during those big family get-togethers or your child's over-the-top birthday party. By adding a large table, plenty of chairs and a bar cart, you can easily turn it into an entertaining mecca — with the right party decorations, of course. Because it's so simple, a dining room is often hard to decorate and renovate. One of the easiest (and only) changes you can make is swapping out your furniture. As the focal point of the room, your dining set should be your biggest investment. Take time to consider what size and style works best for your space, and don't be afraid to splurge — a good dining table can last you decades. Once you have a table sorted out, find ways to add some storage for all that extra dinnerware and barware. And don't forget about the decor! Using fun colors and interesting accessories is an easy way to add personality in a room that can | |
| </div> | |
| <div class="js-expand-toggle-more ui-btn">More</div> | |
| <div class="js-expand-toggle-less ui-btn ui-disable">Less</div> | |
| </div> | |
| <hr> | |
| <div class="js-expand-module-type-another ui-content"> | |
| <div class="ui-text"> | |
| The dining room by nature is a simple space. Unlike a kitchen or living room, which often has multiple purposes, your dining room is solely about eating and entertaining. Even though you might not use it that frequently, it's great to have during those big family get-togethers or your child's over-the-top birthday party. By adding a large table, plenty of chairs and a bar cart, you can easily turn it into an entertaining mecca — with the right party decorations, of course. Because it's so simple, a dining room is often hard to decorate and renovate. One of the easiest (and only) changes you can make is swapping out your furniture. As the focal point of the room, your dining set should be your biggest investment. Take time to consider what size and style works best for your space, and don't be afraid to splurge — a good dining table can last you decades. Once you have a table sorted out, find ways to add some storage for all that extra dinnerware and barware. And don't forget about the decor! Using fun colors and interesting accessories is an easy way to add personality in a room that can | |
| </div> | |
| <div class="js-expand-toggle-more ui-btn">More</div> | |
| <div class="js-expand-toggle-less ui-btn ui-disable">Less</div> | |
| </div> | |
| <script src="//code.jquery.com/jquery-1.9.1.min.js"><\/script> | |
| </body> | |
| </html></script> | |
| <script id="jsbin-source-css" type="text/css">.ui-content{ | |
| .ui-text{ | |
| height: 6em; | |
| overflow: hidden; | |
| } | |
| &.is-open{ | |
| .ui-text{ | |
| height: auto; | |
| } | |
| } | |
| &.ui-open{ | |
| .ui-text{ | |
| height: auto; | |
| } | |
| } | |
| } | |
| .ui-btn{ | |
| color: #009988; | |
| font-weight: bold; | |
| cursor: pointer; | |
| } | |
| .ui-disable{ | |
| display: none; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">class Expand | |
| class Expand.Module | |
| _options = {} | |
| constructor: (root, options) -> | |
| _options = options | |
| @.$_elm = { | |
| root: $(root) | |
| more: $(options.elm.more, root) | |
| less: $(options.elm.less, root) | |
| } | |
| @.isOpen = @.$_elm.root.hasClass(_options.className.open) | |
| @.bind() | |
| bind: () -> | |
| _self = @ | |
| @.$_elm.more.on 'click', () -> | |
| _self.toggle() | |
| @.$_elm.less.on 'click', () -> | |
| _self.toggle() | |
| toggle: () -> | |
| @.$_elm.root.toggleClass(_options.className.open) | |
| @.$_elm.more.toggleClass(_options.className.disable) | |
| @.$_elm.less.toggleClass(_options.className.disable) | |
| @.isOpen = !@.isOpen | |
| constructor: (options) -> | |
| @.options = { | |
| elm: { | |
| root: '.js-expand-module' | |
| more: '.js-expand-toggle-more' | |
| less: '.js-expand-toggle-less' | |
| } | |
| className: { | |
| open: 'ui-open' | |
| disable: 'ui-disable' | |
| } | |
| } | |
| @.options = $.extend(true, @.options, options) | |
| @.module = [] | |
| _elms = $(@.options.elm.root) | |
| for elm in _elms | |
| @.module.push(new Expand.Module(elm, @.options)) | |
| $ -> | |
| window.expand = new Expand({ | |
| className: { | |
| open: 'is-open' | |
| } | |
| }) | |
| window.expandTwo = new Expand({ | |
| elm: { | |
| root: '.js-expand-module-type-another' | |
| } | |
| })</script></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .ui-content .ui-text { | |
| height: 6em; | |
| overflow: hidden; | |
| } | |
| .ui-content.is-open .ui-text { | |
| height: auto; | |
| } | |
| .ui-content.ui-open .ui-text { | |
| height: auto; | |
| } | |
| .ui-btn { | |
| color: #009988; | |
| font-weight: bold; | |
| cursor: pointer; | |
| } | |
| .ui-disable { | |
| display: none; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var Expand; | |
| Expand = (function() { | |
| Expand.Module = (function() { | |
| var _options; | |
| _options = {}; | |
| function Module(root, options) { | |
| _options = options; | |
| this.$_elm = { | |
| root: $(root), | |
| more: $(options.elm.more, root), | |
| less: $(options.elm.less, root) | |
| }; | |
| this.isOpen = this.$_elm.root.hasClass(_options.className.open); | |
| this.bind(); | |
| } | |
| Module.prototype.bind = function() { | |
| var _self; | |
| _self = this; | |
| this.$_elm.more.on('click', function() { | |
| return _self.toggle(); | |
| }); | |
| return this.$_elm.less.on('click', function() { | |
| return _self.toggle(); | |
| }); | |
| }; | |
| Module.prototype.toggle = function() { | |
| this.$_elm.root.toggleClass(_options.className.open); | |
| this.$_elm.more.toggleClass(_options.className.disable); | |
| this.$_elm.less.toggleClass(_options.className.disable); | |
| return this.isOpen = !this.isOpen; | |
| }; | |
| return Module; | |
| })(); | |
| function Expand(options) { | |
| var elm, _elms, _i, _len; | |
| this.options = { | |
| elm: { | |
| root: '.js-expand-module', | |
| more: '.js-expand-toggle-more', | |
| less: '.js-expand-toggle-less' | |
| }, | |
| className: { | |
| open: 'ui-open', | |
| disable: 'ui-disable' | |
| } | |
| }; | |
| this.options = $.extend(true, this.options, options); | |
| this.module = []; | |
| _elms = $(this.options.elm.root); | |
| for (_i = 0, _len = _elms.length; _i < _len; _i++) { | |
| elm = _elms[_i]; | |
| this.module.push(new Expand.Module(elm, this.options)); | |
| } | |
| } | |
| return Expand; | |
| })(); | |
| $(function() { | |
| window.expand = new Expand({ | |
| className: { | |
| open: 'is-open' | |
| } | |
| }); | |
| return window.expandTwo = new Expand({ | |
| elm: { | |
| root: '.js-expand-module-type-another' | |
| } | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment