diff --git a/targetable-displayable.html b/targetable-displayable.html
new file mode 100644
index 0000000..adbef8d
--- /dev/null
+++ b/targetable-displayable.html
@@ -0,0 +1,218 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      /* +-----------------------------------------------------------------------+ *\
+      |* | targetable displayable                                                | *|
+      |* | (c) 2014 Michał "rysiek" Woźniak <rysiek@hackerspace.pl>              | *|
+      \* +-----------------------------------------------------------------------+ */
+      /*
+        Permission is hereby granted, free of charge, to any person obtaining a copy
+        of this software and associated documentation files (the "Software"), to deal
+        in the Software without restriction, including without limitation the rights
+        to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+        copies of the Software, and to permit persons to whom the Software is
+        furnished to do so, subject to the following conditions:
+        
+        The above copyright notice and this permission notice shall be included in all
+        copies or substantial portions of the Software.
+        
+        THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+        IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+        FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+        AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+        LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+        OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+        SOFTWARE.
+      */
+      /*
+        Transitions are not really important here, you can remove them, and the mechanics
+        will be the same, the sections will just show/hide immediately.
+        
+        Of course you can use any other propert/transition mix (for example,
+        visibility:hidden works quite well).
+      */
+
+      /* by default, in a .displayable-container do not display direct-descending .displayable */
+      .displayable-container > .displayable {
+        max-height:0px;
+        overflow:hidden;
+        -moz-transition:max-height ease-out 0.5s;
+        -webkit-transition:max-height ease-out 0.5s;
+        transition:max-height ease-out 0.5s;
+        opacity:0.5; /* BUG? animating/transitioning on opacity makes elemets move just a tiny bit for the duration of the transition; doesn't look good */
+      }
+      /* a hidden control checkbox should be hidden */
+      .displayable-control.hide {
+        display:none;
+      }
+      /* display the section once the checkbox is :checked */
+      .displayable-container > .displayable-control:checked ~ .displayable {
+        max-height:500px;
+        opacity:1;
+      }
+      /* targetables */
+      .targetable {
+        display:none;
+      }
+      
+      /* yeah, these have to be explicit */
+      .targetable#displayable-targetable-1:target ~ #displayable-control-none:checked ~ .displayable-container > #displayable-control-1 ~ .displayable,
+      .targetable#displayable-targetable-2:target ~ #displayable-control-none:checked ~ .displayable-container > #displayable-control-2 ~ .displayable,
+      .targetable#displayable-targetable-3:target ~ #displayable-control-none:checked ~ .displayable-container > #displayable-control-3 ~ .displayable {
+        max-height:500px;
+        opacity:1;
+      }
+      
+      
+      /*
+       * making it easier to understand what is going on
+       */
+      #debug-mode {
+        display:none;
+      }
+      label[for="debug-mode"] {
+        display:block;
+        background:#fdd;
+        border: solid 1px #800;
+        border-radius:3px;
+      }
+      label[for="debug-mode"]:before {
+        content:"Enable ";
+      }
+      label[for="debug-mode"]:after {
+        content:" and see what's going on";
+      }
+      #debug-mode:checked {
+        display:block;
+        background:#fdd;
+        border: solid 1px #800;
+        border-radius:3px;
+      }
+      #debug-mode:checked + label[for="debug-mode"]:before {
+        content:"Disable ";
+      }
+      #debug-mode:checked + label[for="debug-mode"]:after {
+        content:"";
+      }
+      #debug-mode:checked ~ .targetable {
+        display:block;
+        opacity:0.5;
+      }
+      #debug-mode:checked ~ .targetable:target {
+        background:#dfd;
+        color:#080;
+        opacity:1;
+      }
+      #debug-mode:checked ~ .targetable:target {
+        content: " targeted!";
+      }
+      #debug-mode:checked ~  .displayable-control,
+      #debug-mode:checked ~  * .displayable-control {
+        display:block !important;
+        opacity:0.5;
+      }
+      #debug-mode:checked ~  .displayable-control:checked,
+      #debug-mode:checked ~  * .displayable-control:checked {
+        opacity:1;
+      }
+      
+      
+      /* just some styling, irrelevant to the mechanics of the example */
+      body {
+        font-family:sans-serif;
+      }
+      .menu {
+        background:#ddf;
+        color:#008;
+      }
+      .menu label {
+        display:block;
+      }
+      label {
+        cursor:pointer;
+      }
+      .displayable {
+        background:rgba(0, 0, 0, 0.15);
+        margin:0.5em;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- debug mode checkbox -->
+    <input type="checkbox" name="debug-mode" id="debug-mode" title="Debug mode checkbox"/>
+    <label for="debug-mode">debug mode</label>
+
+    <!-- menu, detached from the sections themselves -->
+    <div class="menu">
+      <label for="displayable-control-1">Section #1</label>
+      <label for="displayable-control-2">Section #2</label>
+      <label for="displayable-control-3">Section #3</label>
+    </div>
+    
+    <!-- targetables (only valid and working for sections, no way to make them work for subsections) -->
+    <div class="targetable" id="displayable-targetable-1">Targetable #1</div>
+    <div class="targetable" id="displayable-targetable-2">Targetable #2</div>
+    <div class="targetable" id="displayable-targetable-3">Targetable #3</div>
+    
+    <!-- this one is needed for handling :target -->
+    <input type="radio" class="displayable-control hide" name="section" id="displayable-control-none" checked="checked"  title="Non-section radiobutton (default)"/>
+
+    <!-- section #1 -->
+    <div class="displayable-container">
+      <input type="radio" class="displayable-control hide" name="section" id="displayable-control-1" title="Section #1 radioutton"/>
+      <div class="displayable">
+        Displayable section #1 contents, no subsections
+      </div>
+    </div>
+    
+    <!-- section #2 -->
+    <div class="displayable-container">
+      <input type="radio" class="displayable-control hide" name="section" id="displayable-control-2" title="Section #2 radiobutton"/>
+      <div class="displayable">
+        Displayable section #2 contents, 2 subsections
+        <ul>
+          <li><label for="displayable-control-2-1">Section #2, subsection #1</label></li>
+          <li><label for="displayable-control-2-2">Section #2, subsection #2</label></li>
+        </ul>
+
+        Some more content.        
+        <hr/>
+        
+        <!-- subsection #1 -->
+        <label for="displayable-control-2-1">Section #2, subsection #1, section-local label</label>
+        <div class="displayable-container">
+          <input type="checkbox" class="displayable-control hide" name="subsection-2-1" id="displayable-control-2-1" title="Section #2 subsection #1 checkbox"/>
+          <div class="displayable">
+            Displayable section #2, subsection #1
+          </div>
+        </div>
+        
+        <!-- subsection #2 -->
+        <label for="displayable-control-2-2">Section #2, subsection #2, section-local label</label>
+        <div class="displayable-container">
+          <input type="checkbox" class="displayable-control hide" name="subsection-2-2" id="displayable-control-2-2" title="Section #2 subsection #1 checkbox"/>
+          <div class="displayable">
+            Displayable section #2, subsection #2
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- section #3 -->
+    <div class="displayable-container">
+      <input type="radio" class="displayable-control hide" name="section" id="displayable-control-3" title="Section #3 radiobutton"/>
+      <div class="displayable">
+        Displayable section #3 contents
+      </div>
+    </div>
+    
+    <!-- targetable links -->
+    <p>Target section links. Note that after using the checkbox/radiobutton-based navigation these do not work as on-site navigation &mdash; they are only meant to provide a way of linking to a particular section directly, not the on-site navigation, though.</p>
+    <ul>
+      <li><a href="#displayable-targetable-1" title="Section #1 target link">Target Section #1</a></li>
+      <li><a href="#displayable-targetable-2" title="Section #2 target link">Target Section #2</a></li>
+      <li><a href="#displayable-targetable-3" title="Section #3 target link">Target Section #3</a></li>
+    </ul>
+  </body>
+</html>
\ No newline at end of file
