outoftime/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
<form>
	<div class="multiselect">
		<div class="selectNotification" onclick="showCheckboxes()">
			<select>
				<option>Subscribe For Updates</option>
			</select>
			<div class="overSelect"></div>
		</div>
		<div id="checkboxes">
			<label for="allss">
				<input type="checkbox" id="all" name = "test"/>All</label>
			<label for="breaker">
				<div class="divider"></div></label>
			<label for="myPost">
				<input type="checkbox" id="myPost" />Replies to my post</label>
			<label for="postAdd">
				<input type="checkbox" id="postAdd" />When new post are added</label>
			<label for="Replied">
				<input type="checkbox" id="Replied" />When any post is replied to </label>
		</div>
	</div>
</form>
<button id="button">test</button>
    </body>
</html>

## popcode.json
{"enabledLibraries":["jquery"]}

## script.js
var expanded = false;
var map = false;

function showCheckboxes() {
  var checkboxes = document.getElementById("checkboxes");
  if (!expanded) {
    checkboxes.style.display = "block";
    expanded = true;
  } else {
    checkboxes.style.display = "none";
    expanded = false;
  }
}
var num =0;
while (num <2){

if (num===0){
    $("#button").click(function () {
        num+=1;
        $('#button').css("color","red");
         console.log(num);
    });
}
if (num===1){
    $("#button").click(function () {
        num-=1;
        $('#button').css("color","blue");
         console.log(num);
    });
}
}

## styles.css
.multiselect {
  width: 200px;
}

.selectNotification {
  position: relative;
}

.selectNotification select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  border: 1px #dadada solid;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}
.divider{
width: 198px;
height: 1px;
border-bottom: 1px solid #d3d3d3;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Page Title</title>
	</head>
	<body>
	<form>
	<div class="multiselect">
	<div class="selectNotification" onclick="showCheckboxes()">
	<select>
	<option>Subscribe For Updates</option>
	</select>
	<div class="overSelect"></div>
	</div>
	<div id="checkboxes">
	<label for="allss">
	<input type="checkbox" id="all" name = "test"/>All</label>
	<label for="breaker">
	<div class="divider"></div></label>
	<label for="myPost">
	<input type="checkbox" id="myPost" />Replies to my post</label>
	<label for="postAdd">
	<input type="checkbox" id="postAdd" />When new post are added</label>
	<label for="Replied">
	<input type="checkbox" id="Replied" />When any post is replied to </label>
	</div>
	</div>
	</form>
	<button id="button">test</button>
	</body>
	</html>
	var expanded = false;
	var map = false;

	function showCheckboxes() {
	var checkboxes = document.getElementById("checkboxes");
	if (!expanded) {
	checkboxes.style.display = "block";
	expanded = true;
	} else {
	checkboxes.style.display = "none";
	expanded = false;
	}
	}
	var num =0;
	while (num <2){

	if (num===0){
	$("#button").click(function () {
	num+=1;
	$('#button').css("color","red");
	console.log(num);
	});
	}
	if (num===1){
	$("#button").click(function () {
	num-=1;
	$('#button').css("color","blue");
	console.log(num);
	});
	}
	}
	.multiselect {
	width: 200px;
	}

	.selectNotification {
	position: relative;
	}

	.selectNotification select {
	width: 100%;
	font-weight: bold;
	}

	.overSelect {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	}

	#checkboxes {
	display: none;
	border: 1px #dadada solid;
	}

	#checkboxes label {
	display: block;
	}

	#checkboxes label:hover {
	background-color: #1e90ff;
	}
	.divider{
	width: 198px;
	height: 1px;
	border-bottom: 1px solid #d3d3d3;
	}