Skip to content

Instantly share code, notes, and snippets.

@megantaylor
Created November 20, 2017 12:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save megantaylor/ce1a28314afc9481c90d763c4b51f921 to your computer and use it in GitHub Desktop.
Save megantaylor/ce1a28314afc9481c90d763c4b51f921 to your computer and use it in GitHub Desktop.
Exported from Popcode. Click to import: https://popcode.org/?gist=ce1a28314afc9481c90d763c4b51f921
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Button Game</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<h3>
Click a button to make other buttons disappear and reappear.
</h3>
<br>
<h3>
Can you make all the buttons disappear except the blue button?
</h3>
<div id="wrapper">
<button id="b1"> refresh buttons </button>
</div>
<br>
<button id="one">1</button>
<button class="common" id="two">2</button>
<button class="common" id="three">3</button>
<button class="common" id="four">4</button>
<button class="common" id="five">5</button>
<button class="common" id="six">6</button>
<button class="common" id="seven">7</button>
<button class="common" id="eight">8</button>
</body>
</html>
{"enabledLibraries":["jquery"]}
$("#one").click(function(){
$("#five").toggle();
});
$("#two").click(function(){
$("#four").toggle();
});
$("#three").click(function(){
$("#seven").toggle();
});
$("#four").click(function(){
$("#eight").toggle();
});
$("#five").click(function(){
$("#three").toggle();
});
$("#six").click(function(){
$("#two").toggle();
});
$("#seven").click(function(){
$("#six").toggle();
});
$("#eight").click(function(){
$("#one").toggle();
});
$("#b1").click(function(){
$(".common").show();
});
$("#b1").click(function(){
$("#one").show();
});
#one {
background-color:lightblue;
}
.common {
background-color:lightgreen;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment