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;
}
}