Toggle div on click or touch and hide on click/touch/scroll outside

See more:

CSS

I need to hide a particular div with the press of a button or toggle, so basically: Press once to hide, press again to show, press any area of screen to hide, and scroll to hide. I want the hide/show rules to be done in CSS if possible. Thanks.

HTML:

<input type="checkbox" id="toggle1" />
<div>
	<label for="toggle1" class="toggle1" data-open="OPEN" data-close="CLOSE" onclick></label>
<ul class="catmenu">
  <li><a href="/">AAA</a></li>
  <li><a href="/">BBB</a></li>
  <li><a href="/">CCC</a></li>
</ul>
</div>

<input type="checkbox" id="toggle2" />
<div>
	<label for="toggle2" class="toggle2" data-open="OPEN" data-close="CLOSE" onclick></label>
<ul class="catmenu">
  <li><a href="/">AAA</a></li>
  <li><a href="/">BBB</a></li>
  <li><a href="/">CCC</a></li>
</ul>
</div>

CSS:

.header { position: relative; }
#toggle1, .toggle1 { display: none; }
.catmenu > li { display: none;	}

#toggle2, .toggle2 { display: none; }

.clearfix:before, .clearfix:after { display: table; content: ""; }
.clearfix:after { clear: both; }

@media only screen and (max-width: 767px){
	.catmenu { display: none; opacity: 0; width: 100%; position: absolute; }
	.catmenu > li { display: block; width: 100%; margin: 0; }
	#toggle1:checked + div .catmenu { display: block; opacity: 1;}
	
	#toggle2:checked + div .catmenu { display: block; opacity: 1;}
}

.header{
	min-height: 100px;
	height: 100%;
	padding: 0 20px;
	background: #FFFFFF;
}

.header > h1 {
	float: left;
	padding: 30px 0 0;		
	font-style: italic;
	font-size: 28px;
	color: #DFDFDF;
}

.nav{ 
	display: block; 
	float: right; 
}

.toggle1{ 
	z-index: 2; 
	display: inline-block;
	width: 50px;
	float: left;
}

.toggle2{ 
	z-index: 2; 
	display: inline-block;
	width: 50px;
	float: left;
}

@media only screen and (max-width: 767px){

	.catmenu{
    border-top: 1px solid #51C1F1;
    margin: 35px 0 0 0;
    text-align: left;
    background: none repeat scroll 0 0 #EEEEEE;
    padding: 14px 0 5px 2px;
    font-family: "Microsoft JhengHei", arial narrow, serif;
    font-size: 20px;
    line-height: 28px;
	}
	
	.catmenu > li {
    display: inline-block;
    text-align: left;
    width: 47px;
    margin: 0px -1px 0 0;
	}
	
	.catmenu > li > a{
    display: block;
    padding: 0 0;
    color: #333333;
	}
	
	.catmenu > li > a:hover, .catmenu > li > a:focus{
	}
	
	.toggle1:after {
		content: attr(data-open);
		display: inline-block;
		width: 50px;
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		background: none;
		-webkit-border-radius: 2px;
		border-radius: 2px;
		text-align: center;
		font-size: 12px;
		line-height: 35px;
		color: #333333;
		-webkit-transition: all 0.5s linear;
		-moz-transition: all 0.5s linear;
		-o-transition: all 0.5s linear;
		transition: all 0.5s linear;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box; 
	}
	
	.toggle2:after {
		content: attr(data-open);
		display: inline-block;
		width: 50px;
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		background: none;
		-webkit-border-radius: 2px;
		border-radius: 2px;
		text-align: center;
		font-size: 12px;
		line-height: 35px;
		color: #333333;
		-webkit-transition: all 0.5s linear;
		-moz-transition: all 0.5s linear;
		-o-transition: all 0.5s linear;
		transition: all 0.5s linear;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box; 
	}
	
	.toggle1:hover:after{
		background: none;
		text-align: center;
		color: #333333;
	}
	
	#toggle1:checked + div .toggle:after{
		content: attr(data-close);
		background: #45ABD6;
		text-align: center;
		color: #ffffff;
	}
	
	
	.toggle2:hover:after{
		background: none;
		text-align: center;
		color: #333333;
	}
	
	#toggle2:checked + div .toggle2:after{
		content: attr(data-close);
		background: #45ABD6;
		text-align: center;
		color: #ffffff;
	}
}