Skip to content

Instantly share code, notes, and snippets.

@namsral

namsral/zippy.html

Created February 3, 2012 09:58
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save namsral/1729447 to your computer and use it in GitHub Desktop.
Save namsral/1729447 to your computer and use it in GitHub Desktop.
Download ZIP
Zippy example from the Angular.js talk at HTML5 Dev Conf
Raw
zippy.html
<!doctype html>
<html xmlns:ng="http://angularjs.org">
<meta charset="UTF-8" />
<script src="http://code.angularjs.org/angular-0.9.19.min.js" ng:autobind></script>
<body>
<zippy class="open">
<header>Greeting</header>
<pane>Hello World!</pane>
</zippy>
<script type="text/javascript">
angular.widget('zippy', function(zippy){
return function(zippy){
zippy.bind('click', function(){
zippy
.toggleClass('open close');
});
}
});
</script>
<style>
zippy {
border: 1px solid #aaa;
display: inline-block;
width: 400px;
}
zippy.open > header:before {content: '▼ ';}
zippy.open > pane {display: block;}
zippy.close > header:before {content: '► ';}
zippy.close > pane {display: none;}
zippy > header {
background-color: #aaa;
color: white;
padding: 4px 10px;
cursor: pointer;
}
zippy > pane {
padding: 4px 10px;
color: #aaa;
}
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment