Created
June 19, 2014 09:01
-
-
Save ShinyChang/d352121f20e17ee2830c to your computer and use it in GitHub Desktop.
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 name="description" content="Coursera clone" /> | |
| <script src="http://code.jquery.com/jquery.min.js"></script> | |
| <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" type="text/css" /> | |
| <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" /> | |
| <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <div class='list'> | |
| <div class='chapter show'> | |
| <div class='main clearfix'> | |
| <span class='time'>1h 12m</span> | |
| <div class='head'>Why Home Cooking Matters</div> | |
| <div class='desc'>A childhood obesity epidemic is facing the USA and many developed nations. Why are so many foods processed, and what can we do to protect our families? We also explore the six basic ingredients every cook should have on hand! </div> | |
| </div> | |
| <ul class='section'> | |
| <li class='section-item'> | |
| <a class='clearfix'> | |
| <span class='time'>3 min</span> | |
| <span class='circle on'></span> | |
| <div class='name'> | |
| Introduction To Child Natrition | |
| </div> | |
| </a> | |
| </li> | |
| <li class='section-item'> | |
| <a class='clearfix'> | |
| <span class='time'>21 min</span> | |
| <span class='circle'></span> | |
| <div class='name'> | |
| Why home cooking matters | |
| </div> | |
| </a> | |
| </li> | |
| <li class='section-item'> | |
| <a class='clearfix'> | |
| <span class='time'>1h 12m</span> | |
| <span class='circle'></span> | |
| <div class='name'> | |
| Why are there so many processed foods? | |
| </div> | |
| </a> | |
| </li> | |
| </ul> | |
| <div class='toggle'><i class='icon-plus'></i> Show 13 itmes</div> | |
| </div> | |
| </div> | |
| </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
| var container = $(".list"); | |
| container.find(".main, .toggle").bind('click', function(e){ | |
| $(this).closest(".chapter").toggleClass('show'); | |
| }); |
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
| /* SYSTEM DEFAULT */ | |
| ul { | |
| list-style:none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| a { | |
| cursor:pointer; | |
| } | |
| /* VAR */ | |
| @borderColor: #ccc; | |
| @background: #fafafa; | |
| @green: #b1fa60; | |
| /* STYLE START */ | |
| .time { | |
| color: gray; | |
| float:right; | |
| } | |
| .circle { | |
| width: 8px; | |
| height: 8px; | |
| border: 1px solid @borderColor; | |
| border-radius:50%; | |
| margin-right: 10px; | |
| margin-top: 6px; | |
| float:left; | |
| &.on { | |
| background: @green; | |
| border-color: darken(@green, 20%); | |
| } | |
| } | |
| .list { | |
| .chapter { | |
| border:1px solid @borderColor; | |
| .main { | |
| padding: 10px; | |
| border-bottom: 1px solid @borderColor; | |
| cursor:pointer; | |
| .head { | |
| font-size: 1.5em; | |
| line-height:1.3; | |
| margin-bottom:15px; | |
| } | |
| .desc { | |
| color: gray; | |
| } | |
| } | |
| .section { | |
| height: 0; | |
| overflow:hidden; | |
| .section-item { | |
| background: @background; | |
| border-bottom: 1px solid @borderColor; | |
| padding: 10px; | |
| > a { | |
| display:block; | |
| } | |
| .name { | |
| overflow:hidden; | |
| } | |
| } | |
| } | |
| .toggle { | |
| padding: 10px; | |
| color: gray; | |
| cursor:pointer; | |
| } | |
| &.show { | |
| .section { | |
| height: auto; | |
| } | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment