title: Toggle div on click or touch and hide on click/touch/scroll outside
body: <p>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.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;input type="checkbox" id="toggle1" /&gt;
  &lt;div&gt;
  &lt;label for="toggle1" class="toggle1" data-open="OPEN" data-close="CLOSE" onclick&gt;&lt;/label&gt;
  &lt;ul class="catmenu"&gt;
    &lt;li&gt;&lt;a href="/"&gt;AAA&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="/"&gt;BBB&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="/"&gt;CCC&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;input type="checkbox" id="toggle2" /&gt;
  &lt;div&gt;
  &lt;label for="toggle2" class="toggle2" data-open="OPEN" data-close="CLOSE" onclick&gt;&lt;/label&gt;
  &lt;ul class="catmenu"&gt;
    &lt;li&gt;&lt;a href="/"&gt;AAA&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="/"&gt;BBB&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="/"&gt;CCC&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.header { position: relative; }
  #toggle1, .toggle1 { display: none; }
  .catmenu &gt; 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 &gt; 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 &gt; 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 &gt; li {
  display: inline-block;
  text-align: left;
  width: 47px;
  margin: 0px -1px 0 0;
  }
  
  .catmenu &gt; li &gt; a{
  display: block;
  padding: 0 0;
  color: #333333;
  }
  
  .catmenu &gt; li &gt; a:hover, .catmenu &gt; li &gt; 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;
  }
  }
  </code></pre>