Created
June 20, 2014 01:58
-
-
Save ShinyChang/0756b72fb858bc10b1ea 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 clearfix show'> | |
| <div class='clock'> | |
| <div class='clock-inside'>11 %</div> | |
| <div class='clock-progress'></div> | |
| </div> | |
| <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: 12px; | |
| height: 12px; | |
| border: 1px solid @borderColor; | |
| border-radius:50%; | |
| display: inline-block; | |
| &.on { | |
| background: @green; | |
| border-color: darken(@green, 20%); | |
| } | |
| } | |
| .clock { | |
| width: 48px; | |
| height: 48px; | |
| text-align:center; | |
| line-height:48px; | |
| font-size:12px; | |
| color: gray; | |
| border-radius: 50%; | |
| border: 1px solid @borderColor; | |
| display: inline-block; | |
| position: relative; | |
| .clock-inside { | |
| position: absolute; | |
| width: 100%; | |
| } | |
| .clock-progress { | |
| border:4px solid @green; | |
| height:100%; | |
| box-sizing: border-box; | |
| border-radius: 50%; | |
| clip: rect(24px, 24px, 24px, 24px); | |
| } | |
| } | |
| .list { | |
| .chapter { | |
| border:1px solid @borderColor; | |
| .clock { | |
| float: left; | |
| margin-top: 10px; | |
| margin-left: 10px; | |
| } | |
| .main { | |
| padding: 10px; | |
| cursor:pointer; | |
| overflow:hidden; | |
| .time { | |
| margin-top:5px; | |
| } | |
| .head { | |
| font-size: 1.5em; | |
| line-height:1.3; | |
| margin-bottom:15px; | |
| } | |
| .desc { | |
| color: gray; | |
| } | |
| } | |
| .section { | |
| height: 0; | |
| border-top: 1px solid @borderColor; | |
| overflow:hidden; | |
| .section-item { | |
| background: @background; | |
| border-bottom: 1px solid @borderColor; | |
| padding: 10px; | |
| > a { | |
| display:block; | |
| } | |
| .name { | |
| overflow:hidden; | |
| } | |
| .circle { | |
| float:left; | |
| margin-left: 15px; | |
| margin-right: 30px; | |
| margin-top: 5px; | |
| } | |
| } | |
| } | |
| .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