Skip to content

Instantly share code, notes, and snippets.

@vordan
Created May 5, 2016 19:18
Show Gist options
  • Save vordan/5add4d3abd023978c6afa0d4f5e9bd3c to your computer and use it in GitHub Desktop.
Save vordan/5add4d3abd023978c6afa0d4f5e9bd3c to your computer and use it in GitHub Desktop.
jQuery expanding a div
<style>
#jQ, #van {
width:76px;
height:76px;
padding:24px;
border:2px solid;
border-radius:8px;
cursor:pointer;
}
#van {
transition:1s width;
}
</style>
<div id='jQ'>Click Me</div>
<div id='van'>But vanilla tastes better...</div>
<script>
//jQuery
$(document).ready(function() {
$("#jQ").click(function() {
$("#jQ").animate({
width: 200
}, 1000);
});
});
//vanilla
document.querySelector("#van").addEventListener("click", function() {
this.style.width = "200px";
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment