Skip to content

Instantly share code, notes, and snippets.

@nim23

nim23/index.html

Created November 12, 2014 19:41
Show Gist options
  • Save nim23/b1aa5f663d0490d428c1 to your computer and use it in GitHub Desktop.
Save nim23/b1aa5f663d0490d428c1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<style id="jsbin-css">
*{
box-sizing: border-box;
}
.container{
position: relative;
background-color: green;
}
.text{
padding: 2em;
display: inline-block;
}
.expand{
display: inline-block;
position: absolute;
right: 0;
top: 1.5em;
border-left: 2px solid red;
padding: 0.25em 0.5em;
}
.fa{
transition: all 600ms ease-in-out;
}
.rotate{
transform: rotate(180deg);
}
</style>
</head>
<body>
<div class='container'>
<span class='text'>Hello</span>
<span class='expand'>
<i class="fa fa-chevron-down"></i>
</span>
</div>
<script id="jsbin-javascript">
$('.fa').on('click', function(){
$(this).toggleClass('rotate');
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class='container'>
<span class='text'>Hello</span>
<span class='expand'>
<i class="fa fa-chevron-down"></i>
</span>
</div>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">*{
box-sizing: border-box;
}
.container{
position: relative;
background-color: green;
}
.text{
padding: 2em;
display: inline-block;
}
.expand{
display: inline-block;
position: absolute;
right: 0;
top: 1.5em;
border-left: 2px solid red;
padding: 0.25em 0.5em;
}
.fa{
transition: all 600ms ease-in-out;
}
.rotate{
transform: rotate(180deg);
}</script>
<script id="jsbin-source-javascript" type="text/javascript">$('.fa').on('click', function(){
$(this).toggleClass('rotate');
});</script></body>
</html>
Raw
jsbin.totuferego.css
*{
box-sizing: border-box;
}
.container{
position: relative;
background-color: green;
}
.text{
padding: 2em;
display: inline-block;
}
.expand{
display: inline-block;
position: absolute;
right: 0;
top: 1.5em;
border-left: 2px solid red;
padding: 0.25em 0.5em;
}
.fa{
transition: all 600ms ease-in-out;
}
.rotate{
transform: rotate(180deg);
}
Raw
jsbin.totuferego.js
$('.fa').on('click', function(){
$(this).toggleClass('rotate');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment