title: Hide divs after reach viewport and be able to show them again
body: <p>Can anyone help me please, when I reach viewport 767 I need to hide all textfields, all you need to see are the bullets. When you click on a bullet it needs to show it.</p>
  
  <p><strong>My fiddle:</strong> 
  <a href="http://jsfiddle.net/fourroses666/zDg2J/4/" rel="nofollow">http://jsfiddle.net/fourroses666/zDg2J/4/</a></p>
  
  <p>HTML
      
      </p>
  
  <pre><code>&lt;div class="bull bull-blok1"&gt;&lt;a class="show-blok1" href="javascript:void(0)"&gt;Show&lt;/a&gt;&lt;/div&gt;
  &lt;div class="bull bull-blok2"&gt;&lt;a class="show-blok2" href="javascript:void(0)"&gt;Show&lt;/a&gt;&lt;/div&gt;
  &lt;div class="bull bull-blok3"&gt;&lt;a class="show-blok3" href="javascript:void(0)"&gt;Show&lt;/a&gt;&lt;/div&gt;
  
  &lt;div class="blokken blok1"&gt;
    &lt;div class="line"&gt;&lt;/div&gt;
    &lt;div class="text"&gt;&lt;div class="padx"&gt;text hier&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="blokken blok2"&gt;
    &lt;div class="line"&gt;&lt;/div&gt;
    &lt;div class="text"&gt;&lt;div class="padx"&gt;text hier 2&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="blokken blok3"&gt;
    &lt;div class="line"&gt;&lt;/div&gt;
    &lt;div class="text"&gt;&lt;div class="padx"&gt;text hier 3&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.fles-k1{width:220px; margin:0 auto; position:relative;}
  .blokken{position:absolute; z-index:2; width:180px; min-height:100px; background:url(/img/bg-fles-blok.jpg) center bottom #ccc;}
  .bull, .bullmob{position:absolute; border-radius:24px; height:24px; width:24px; border:3px solid #fff; background-color:#c5ad7d; z-index:3;}
  .bull a{display:block; height:24px; width:24px; text-indent:-999px; overflow:hidden;}
  
  .blokken .line{position:absolute; background-color:#c5ad7d;}
  .blokken .text{color:#000;}
  .blokken .text .padx{padding:12px 12px 18px 12px;}
  
  .bull-blok1{left:110px; top:76px;}
  .blok1{left:256px; top:40px;}
  .blok1 .line{margin:50px 0 0 -120px; height:2px; width:120px;}
  
  .bull-blok2{left:35px; top:282px;}
  .blok2{left:-205px; top:246px;}
  .blok2 .line{margin:50px 0 0 180px; height:2px; width:65px;}
  
  .bull-blok3{left:148px; top:316px;}
  .blok3{left:295px; top:280px;}
  .blok3 .line{margin:50px 0 0 -130px; height:2px; width:130px;}
  
  .bull a{display:none;}
  .hidden{display:block; visibility:hidden;}
  
  @media only screen and (max-width: 767px){
  
  .bull a{display:block;}
  .fles-content {position: relative; padding-bottom:10px;}
  .fles-wrapper{max-width:320px;}
  
  .blok1{left:35px; top:125px; margin:0;}
  .blok1 .line{margin:-20px 0 0 89px; height:20px; width:2px;}
  .blok2{left:-35px; top:330px; margin:0;}
  .blok2 .line{margin:-20px 0 0 83px; height:20px; width:2px;}
  .blok3{left:70px; top:364px; margin:0;}
  .blok3 .line{margin:-20px 0 0 92px; height:20px; width:2px;}
  
  }
  </code></pre>
  
  <p>POSSIBLE JS?</p>
  
  <pre><code>    $('.show-blok1').click(function(){
          $('.blok1').toggleClass('hidden');
      });
  </code></pre>
  
  <p>or something like this?</p>
  
  <pre><code>$(window).resize(function() {
  if ($(window).width() &lt; 767) {
      ?
      }
  else {
      ?
      }
      });
  </code></pre>