Skip to content

Instantly share code, notes, and snippets.

@outoftime
Created May 6, 2017 18:17
Show Gist options
  • Select an option

  • Save outoftime/5e2a46cc9020db3c10f1d7c9e4faae1e to your computer and use it in GitHub Desktop.

Select an option

Save outoftime/5e2a46cc9020db3c10f1d7c9e4faae1e to your computer and use it in GitHub Desktop.
Exported from Popcode. Click to import: https://popcode.org/?gist=5e2a46cc9020db3c10f1d7c9e4faae1e
<!DOCTYPE html>
<html>
<head>
<title>jQuery Funhouse</title>
</head>
<body>
<div class="row">
<div class="control">
<img id="garage-door-opener" src="https://dl.dropboxusercontent.com/u/364501990/garagedoor.jpg">
</div>
<div>
<img id="garage-door" src="https://dl.dropboxusercontent.com/u/364501990/garage-door.jpg">
</div>
</div>
<div class="row">
<div class="control">
<img id="transporter-controls" src="https://dl.dropboxusercontent.com/u/364501990/transportercontrols.jpg">
</div>
<div>
<img id="away-team" src="https://dl.dropboxusercontent.com/u/364501990/transporter.jpg">
</div>
</div>
<div class="row">
<div class="control">
<img id="light-switch" src="https://dl.dropboxusercontent.com/u/364501990/lightswitch.jpeg">
</div>
<div>
<img id="light-bulb" src="https://dl.dropboxusercontent.com/u/364501990/lightbulb.jpg">
</div>
</div>
</body>
</html>
{"enabledLibraries":["jquery"]}
$("#garage-door-opener").click(function() {
$("#garage-door").slideToggle();
});
$("#transporter-controls").click(function() {
$("#away-team").fadeIn();
});
$("#light-switch").click(function() {
$("#light-bulb").toggle();
});
.row {
display: flex;
}
.row > div {
flex: 0 1 50vw;
height: 100%;
}
img {
width: 100%;
}
.control {
cursor: pointer;
}
#away-team {
display: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment