Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
<title>JS Example 3</title>
<script src=""></script>
<style type="text/css">
margin: 0px;
padding: 0px;
font-family: Helvetica;
margin-top: 20px;
margin-left: 20px;
font-weight: bolder;
background-color: yellow;
width: 60px;
text-align: center;
padding: 10px;
margin: 10px;
background-color: gray;
color: pink;
color: green;
color: red;
color: white;
width: 200px;
height: 150px;
text-align: center;
line-height: 30px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
background-color: pink;
<script type="text/javascript">
var hidden = false;
$( document ).ready( function(){
console.log("We clicked Button One!");
console.log("We clicked Button Two!");
console.log("We clicked Button Three!");
hidden = !hidden;
var buttonThreeText;
if (hidden){
buttonThreeText = 'SHOW';
buttonThreeText = 'HIDE';
//Change the text for button Three
//Toggle the display of the box
<div class="instructions">CHANGE THE COLOR
<div class="button" id="buttonOne">PINK</div>
<div class="button" id="buttonTwo">GREEN</div>
<div class = "instructions">TOGGLE THE BOX DISPLAY
<div class="button" id="buttonThree">HIDE</div>
<div id="box"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.