<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>A Pen by Chris Hutchinson</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="video">
<blockquote>Text goes here</blockquote>
<button id="open">Open</button>
<div id="image-wrap" class="image-wrap image-wrap--closed">
<img src="http://www.placehold.it/400x200" class="" />
</div>
</div>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/chrishutchinson/a-pen-by-chris-hutchinson-XbQxJv */
.image-wrap {
overflow: hidden;
height: 200px;
-webkit-transition: all 0.3s ease;
}
.image-wrap--closed {
height: 0;
}
/*Downloaded from https://www.codeseek.co/chrishutchinson/a-pen-by-chris-hutchinson-XbQxJv */
document.getElementById('open').onclick = function() {
if (document.getElementById('image-wrap').classList.contains('image-wrap--closed')) {
console.log('bob');
document.getElementById('image-wrap').classList.remove('image-wrap--closed');
} else {
document.getElementById('image-wrap').classList.add('image-wrap--closed');
}
};
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
