<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tabs - Collapse content</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs({
activate: function( event, ui ) {
console.log( ui.newPanel );
ui.newPanel.scrollTop( 0 );
}
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1" style='overflow:auto; height:400px;'style='overflow:scroll; height:400px;'>
<p><strong>Click this tab again to close the content pane.</strong></p>
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed risus tempor, posuere neque aliquet, mollis ante. Proin vulputate fermentum nulla vitae lacinia. In fermentum purus dolor, quis condimentum mauris sagittis at. Duis id enim eget lorem varius aliquam in vel magna. Mauris nisi purus, consequat et porta et, imperdiet in augue. Nam scelerisque sem ac ligula eleifend, et vestibulum augue porta. Maecenas feugiat nec nibh ac vestibulum.
Maecenas placerat nisi at bibendum pulvinar. Vestibulum id semper dolor. Praesent dapibus, erat sit amet lacinia commodo, risus metus sollicitudin mauris, sed hendrerit dolor nulla ut diam. Maecenas volutpat consectetur tortor, vel convallis mi faucibus in. Sed vel cursus ipsum. Vestibulum elit ligula, ullamcorper at dui vitae, porttitor consequat nunc. Donec feugiat aliquet tellus at consequat. Nullam malesuada hendrerit neque, eu bibendum dolor tristique sit amet. Nam cursus mollis nisl eu posuere. Cras pretium neque ac libero elementum, eu consequat est porttitor. Cras sit amet vulputate erat. Aliquam pulvinar risus ac mauris sollicitudin sollicitudin. Curabitur malesuada mollis nibh sit amet lacinia. Integer iaculis massa a erat posuere gravida. Morbi mollis lectus a gravida consectetur.
Praesent at molestie ligula. Aliquam et odio porttitor, lobortis magna non, ornare tortor. Mauris quis eros eu tellus hendrerit ornare semper a nunc. Etiam aliquam tincidunt est eu pulvinar. Curabitur nec quam orci. Curabitur interdum magna eu gravida faucibus. Nunc imperdiet turpis eget quam mollis, vitae congue dolor vulputate. Donec ut faucibus lectus. Suspendisse potenti. Praesent mattis tempor ante.
Suspendisse potenti. Proin euismod mi tincidunt dolor lacinia iaculis. Vestibulum pellentesque magna quis hendrerit ornare. Nam tincidunt urna lectus, in egestas lectus ullamcorper congue. Morbi pharetra mi sed posuere accumsan. Vestibulum at tincidunt quam, consectetur mollis turpis. Aenean sit amet scelerisque neque. Cras tempor odio elit, in auctor orci dignissim eget. Sed porta scelerisque cursus. Cras fringilla leo vel risus mattis gravida. Duis ut mauris interdum, eleifend ipsum et, sollicitudin leo. Aenean ultrices commodo tincidunt. Ut blandit, metus ut imperdiet gravida, massa diam tristique nulla, sit amet molestie ante purus non est. Fusce blandit, elit egestas mattis lobortis, ligula sem consectetur lectus, et dignissim elit quam quis sapien. Pellentesque dolor ipsum, elementum nec vulputate nec, condimentum quis nunc. Maecenas aliquam nisl nunc, ac imperdiet velit accumsan ut.
Ut a feugiat lacus, eu rutrum erat. Sed rutrum et mi varius hendrerit. Ut mattis vel est non tincidunt. Pellentesque a porttitor ipsum, egestas accumsan eros. Etiam egestas porttitor scelerisque. Nam mi ligula, mattis elementum sodales sit amet, euismod sed justo. Proin sit amet luctus urna. Sed elit velit, tincidunt vitae nisi in, elementum tempus augue. Sed laoreet ullamcorper justo, eget consectetur velit congue at.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed risus tempor, posuere neque aliquet, mollis ante. Proin vulputate fermentum nulla vitae lacinia. In fermentum purus dolor, quis condimentum mauris sagittis at. Duis id enim eget lorem varius aliquam in vel magna. Mauris nisi purus, consequat et porta et, imperdiet in augue. Nam scelerisque sem ac ligula eleifend, et vestibulum augue porta. Maecenas feugiat nec nibh ac vestibulum.
Maecenas placerat nisi at bibendum pulvinar. Vestibulum id semper dolor. Praesent dapibus, erat sit amet lacinia commodo, risus metus sollicitudin mauris, sed hendrerit dolor nulla ut diam. Maecenas volutpat consectetur tortor, vel convallis mi faucibus in. Sed vel cursus ipsum. Vestibulum elit ligula, ullamcorper at dui vitae, porttitor consequat nunc. Donec feugiat aliquet tellus at consequat. Nullam malesuada hendrerit neque, eu bibendum dolor tristique sit amet. Nam cursus mollis nisl eu posuere. Cras pretium neque ac libero elementum, eu consequat est porttitor. Cras sit amet vulputate erat. Aliquam pulvinar risus ac mauris sollicitudin sollicitudin. Curabitur malesuada mollis nibh sit amet lacinia. Integer iaculis massa a erat posuere gravida. Morbi mollis lectus a gravida consectetur.
Praesent at molestie ligula. Aliquam et odio porttitor, lobortis magna non, ornare tortor. Mauris quis eros eu tellus hendrerit ornare semper a nunc. Etiam aliquam tincidunt est eu pulvinar. Curabitur nec quam orci. Curabitur interdum magna eu gravida faucibus. Nunc imperdiet turpis eget quam mollis, vitae congue dolor vulputate. Donec ut faucibus lectus. Suspendisse potenti. Praesent mattis tempor ante.
Suspendisse potenti. Proin euismod mi tincidunt dolor lacinia iaculis. Vestibulum pellentesque magna quis hendrerit ornare. Nam tincidunt urna lectus, in egestas lectus ullamcorper congue. Morbi pharetra mi sed posuere accumsan. Vestibulum at tincidunt quam, consectetur mollis turpis. Aenean sit amet scelerisque neque. Cras tempor odio elit, in auctor orci dignissim eget. Sed porta scelerisque cursus. Cras fringilla leo vel risus mattis gravida. Duis ut mauris interdum, eleifend ipsum et, sollicitudin leo. Aenean ultrices commodo tincidunt. Ut blandit, metus ut imperdiet gravida, massa diam tristique nulla, sit amet molestie ante purus non est. Fusce blandit, elit egestas mattis lobortis, ligula sem consectetur lectus, et dignissim elit quam quis sapien. Pellentesque dolor ipsum, elementum nec vulputate nec, condimentum quis nunc. Maecenas aliquam nisl nunc, ac imperdiet velit accumsan ut.
Ut a feugiat lacus, eu rutrum erat. Sed rutrum et mi varius hendrerit. Ut mattis vel est non tincidunt. Pellentesque a porttitor ipsum, egestas accumsan eros. Etiam egestas porttitor scelerisque. Nam mi ligula, mattis elementum sodales sit amet, euismod sed justo. Proin sit amet luctus urna. Sed elit velit, tincidunt vitae nisi in, elementum tempus augue. Sed laoreet ullamcorper justo, eget consectetur velit congue at.</p>
</div>
<div id="tabs-2" style='overflow:auto; height:400px;'>
<p><strong>Click this tab again to close the content pane.</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed risus tempor, posuere neque aliquet, mollis ante. Proin vulputate fermentum nulla vitae lacinia. In fermentum purus dolor, quis condimentum mauris sagittis at. Duis id enim eget lorem varius aliquam in vel magna. Mauris nisi purus, consequat et porta et, imperdiet in augue. Nam scelerisque sem ac ligula eleifend, et vestibulum augue porta. Maecenas feugiat nec nibh ac vestibulum.
Maecenas placerat nisi at bibendum pulvinar. Vestibulum id semper dolor. Praesent dapibus, erat sit amet lacinia commodo, risus metus sollicitudin mauris, sed hendrerit dolor nulla ut diam. Maecenas volutpat consectetur tortor, vel convallis mi faucibus in. Sed vel cursus ipsum. Vestibulum elit ligula, ullamcorper at dui vitae, porttitor consequat nunc. Donec feugiat aliquet tellus at consequat. Nullam malesuada hendrerit neque, eu bibendum dolor tristique sit amet. Nam cursus mollis nisl eu posuere. Cras pretium neque ac libero elementum, eu consequat est porttitor. Cras sit amet vulputate erat. Aliquam pulvinar risus ac mauris sollicitudin sollicitudin. Curabitur malesuada mollis nibh sit amet lacinia. Integer iaculis massa a erat posuere gravida. Morbi mollis lectus a gravida consectetur.
Praesent at molestie ligula. Aliquam et odio porttitor, lobortis magna non, ornare tortor. Mauris quis eros eu tellus hendrerit ornare semper a nunc. Etiam aliquam tincidunt est eu pulvinar. Curabitur nec quam orci. Curabitur interdum magna eu gravida faucibus. Nunc imperdiet turpis eget quam mollis, vitae congue dolor vulputate. Donec ut faucibus lectus. Suspendisse potenti. Praesent mattis tempor ante.
Suspendisse potenti. Proin euismod mi tincidunt dolor lacinia iaculis. Vestibulum pellentesque magna quis hendrerit ornare. Nam tincidunt urna lectus, in egestas lectus ullamcorper congue. Morbi pharetra mi sed posuere accumsan. Vestibulum at tincidunt quam, consectetur mollis turpis. Aenean sit amet scelerisque neque. Cras tempor odio elit, in auctor orci dignissim eget. Sed porta scelerisque cursus. Cras fringilla leo vel risus mattis gravida. Duis ut mauris interdum, eleifend ipsum et, sollicitudin leo. Aenean ultrices commodo tincidunt. Ut blandit, metus ut imperdiet gravida, massa diam tristique nulla, sit amet molestie ante purus non est. Fusce blandit, elit egestas mattis lobortis, ligula sem consectetur lectus, et dignissim elit quam quis sapien. Pellentesque dolor ipsum, elementum nec vulputate nec, condimentum quis nunc. Maecenas aliquam nisl nunc, ac imperdiet velit accumsan ut.
Ut a feugiat lacus, eu rutrum erat. Sed rutrum et mi varius hendrerit. Ut mattis vel est non tincidunt. Pellentesque a porttitor ipsum, egestas accumsan eros. Etiam egestas porttitor scelerisque. Nam mi ligula, mattis elementum sodales sit amet, euismod sed justo. Proin sit amet luctus urna. Sed elit velit, tincidunt vitae nisi in, elementum tempus augue. Sed laoreet ullamcorper justo, eget consectetur velit congue at.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed risus tempor, posuere neque aliquet, mollis ante. Proin vulputate fermentum nulla vitae lacinia. In fermentum purus dolor, quis condimentum mauris sagittis at. Duis id enim eget lorem varius aliquam in vel magna. Mauris nisi purus, consequat et porta et, imperdiet in augue. Nam scelerisque sem ac ligula eleifend, et vestibulum augue porta. Maecenas feugiat nec nibh ac vestibulum.
Maecenas placerat nisi at bibendum pulvinar. Vestibulum id semper dolor. Praesent dapibus, erat sit amet lacinia commodo, risus metus sollicitudin mauris, sed hendrerit dolor nulla ut diam. Maecenas volutpat consectetur tortor, vel convallis mi faucibus in. Sed vel cursus ipsum. Vestibulum elit ligula, ullamcorper at dui vitae, porttitor consequat nunc. Donec feugiat aliquet tellus at consequat. Nullam malesuada hendrerit neque, eu bibendum dolor tristique sit amet. Nam cursus mollis nisl eu posuere. Cras pretium neque ac libero elementum, eu consequat est porttitor. Cras sit amet vulputate erat. Aliquam pulvinar risus ac mauris sollicitudin sollicitudin. Curabitur malesuada mollis nibh sit amet lacinia. Integer iaculis massa a erat posuere gravida. Morbi mollis lectus a gravida consectetur.
Praesent at molestie ligula. Aliquam et odio porttitor, lobortis magna non, ornare tortor. Mauris quis eros eu tellus hendrerit ornare semper a nunc. Etiam aliquam tincidunt est eu pulvinar. Curabitur nec quam orci. Curabitur interdum magna eu gravida faucibus. Nunc imperdiet turpis eget quam mollis, vitae congue dolor vulputate. Donec ut faucibus lectus. Suspendisse potenti. Praesent mattis tempor ante.
Suspendisse potenti. Proin euismod mi tincidunt dolor lacinia iaculis. Vestibulum pellentesque magna quis hendrerit ornare. Nam tincidunt urna lectus, in egestas lectus ullamcorper congue. Morbi pharetra mi sed posuere accumsan. Vestibulum at tincidunt quam, consectetur mollis turpis. Aenean sit amet scelerisque neque. Cras tempor odio elit, in auctor orci dignissim eget. Sed porta scelerisque cursus. Cras fringilla leo vel risus mattis gravida. Duis ut mauris interdum, eleifend ipsum et, sollicitudin leo. Aenean ultrices commodo tincidunt. Ut blandit, metus ut imperdiet gravida, massa diam tristique nulla, sit amet molestie ante purus non est. Fusce blandit, elit egestas mattis lobortis, ligula sem consectetur lectus, et dignissim elit quam quis sapien. Pellentesque dolor ipsum, elementum nec vulputate nec, condimentum quis nunc. Maecenas aliquam nisl nunc, ac imperdiet velit accumsan ut.
Ut a feugiat lacus, eu rutrum erat. Sed rutrum et mi varius hendrerit. Ut mattis vel est non tincidunt. Pellentesque a porttitor ipsum, egestas accumsan eros. Etiam egestas porttitor scelerisque. Nam mi ligula, mattis elementum sodales sit amet, euismod sed justo. Proin sit amet luctus urna. Sed elit velit, tincidunt vitae nisi in, elementum tempus augue. Sed laoreet ullamcorper justo, eget consectetur velit congue at.</p>
</div>
<div id="tabs-3" style='overflow:auto; height:400px;'>
<p><strong>Click this tab again to close the content pane.</strong></p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
</body>
</html>
body {
padding: 0;
margin: 0;
background: #3FA8C6;
background-image: linear-gradient(top, #3fa8c6 0%, #3fa8c6 0%, #399ab2 100%);
background-image: gradient(linear, left top, left bottom, color-stop(0%,#3fa8c6), color-stop(0%,#3fa8c6), color-stop(100%,#399ab2));
background-image: linear-gradient(top, #3fa8c6 0%,#3fa8c6 0%,#399ab2 100%);
background-image: linear-gradient(top, #3fa8c6 0%,#3fa8c6 0%,#399ab2 100%);
background-image: linear-gradient(top, #3fa8c6 0%,#3fa8c6 0%,#399ab2 100%);
background-image: linear-gradient(to bottom, #3fa8c6 0%,#3fa8c6 0%,#399ab2 100%);
color: #fff;
font-family: 'Doppio One', sans-serif;
text-shadow: 0 1px 0 rgba(0,0,0,.3);
line-height: 1.5;
font-smoothing: antialiased;
}
.wrapper {
width: 50%;
margin: 0 auto;
}
h1, h2, h3, h4, h5, h6 {
letter-spacing: -0.03em;
font-size: 2em;
}
a {
border-bottom: 1px solid #fff;
border-bottom: 1px solid rgba(255,255,255,0.7);
padding-bottom: 0.15em;
position: relative;
color: white;
text-decoration: none;
}
a:after {
content: '';
position: absolute;
height: 1px;
left: 0;
right: 0;
bottom: -2px;
background: rgba(0,0,0,.1);
}
a:hover {
color: #C0E3EC;
}
h1 {
margin: 0.667em 0 0;
padding-left: 0.5em;
text-align: left;
}
h2 {
font-size: 1.5em;
}
small {
margin-top: 1em;
display: block;
font-style: italic;
font-size: 0.667em;
}
p em {
font-style: none;
}
#welcome {
position: relative;
overflow: hidden;
padding-bottom: 1em;
padding-left: 20px;
}
#welcome > div {
padding-top: 1px;
}
#dave {
float: left;
margin-top: 3em
}
#welcome > h2 {
margin-top: 0.5em;
padding-left: 0.5em;
margin-bottom: 0;
}
.bubble p {
line-height: 22px;
}
.bubble {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.1);
padding: 0.667em 1em;
position: relative;
}
.bubble:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid white;
border-right-color: inherit;
top: 50px;
left: -20px;
}
#features {
margin: 0.444em 0 0;
clear: both;
}
#features > h2 {
margin: 0;
}
#features ol {
position: relative;
padding: 1em 0 1.5em;
background: rgba(0,0,0,.1);
border-color: rgba(0,0,0,.1);
margin: 0;
overflow: hidden;
list-style: none;
counter-reset: item;
}
#features li {
width: 30%;
padding: 0 1.5%;
float: left;
text-align: center;
margin-bottom: 1em;
}
#features li h2 {
display: block;
padding: 1em;
margin: 0.667em auto 1em;
font-size: 1em;
line-height: 1em;
text-align: center;
background: rgba(0,0,0,.1);
border-radius: 2em;
box-shadow: inset 0 0 1em rgba(0,0,0,.1), 0 2px 2px rgba(255,255,255,.1);
}
#next > div {
width: 45%;
float: left;
padding: 0 2.5%;
}
img {
z-index: 1;
transition: transform 2s ease-in-out;
transition: transform 2s ease-in-out;
transition: transform 2s ease-in-out;
transition: transform 2s ease-in-out;
transition: transform 2s ease-in-out;
position: relative;
}
img:active {
transform: rotate(1440deg) scale(1.2);
transform: rotate(1440deg) scale(1.2);
transform: rotate(1440deg) scale(1.2);
transform: rotate(1440deg) scale(1.2);
transform: rotate(1440deg) scale(1.2);
}
@media screen and (max-width: 1200px) {
.wrapper {
width: 80%;
}
}
@media screen and (max-width: 768px) {
.wrapper {
width: auto;
margin: 0;
}
#welcome {
margin-right: 2.5%;
}
}
@media screen and (max-width: 500px) {
.wrapper {
text-align: center;
}
#dave {
float: none;
}
#welcome {
padding: 0 1.5em;
margin: 0;
}
h1 {
text-align: center;
margin-bottom: 0;
padding-left: 0;
font-size: 1.8em;
}
#welcome > h2 {
margin-bottom: 0.667em;
}
.bubble {
text-align: center;
}
.bubble:after {
display: none;
}
#features li {
width: 47%;
}
#features li:last-child {
float: none;
clear: both;
margin: 0 auto;
}
#next > div {
float none;
width: auto;
}
}
Output
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |