diff --git a/authors.html b/authors.html
index 2b30349..57da70e 100644
--- a/authors.html
+++ b/authors.html
@@ -21,7 +21,7 @@ Evgeniy Alekseev wrote this file. As long as you retain this notice you can do w
     <li><a href="http://jekyllrb.com/">Jekyll</a> that licensed under <a href="http://opensource.org/licenses/MIT">MIT License</a>.</li>
     <li>The source theme was created by <a href="https://github.com/orderedlist/minimal">Steve Smith</a> and licensed under <a href="http://creativecommons.org/licenses/by/3.0">Creative Commons Attribution-ShareAlike 3.0 Unported License</a>.</li>
     <li>The comment block was created by <a href="https://github.com/izuzak/izuzak.github.com">Ivan Žužak</a> and licensed under <a href="http://opensource.org/licenses/MIT">MIT License</a>.</li>
-    <li>The spoiler block was created by <a href="http://www.cyberforum.ru/post5368179.html">markeley</a> and it looks like it has no any license.</li>
+    <li>The spoiler block was created by <a href="http://www.cyberforum.ru/post5368179.html">markeley</a> and <a href="http://habrahabr.ru/post/167151/">Defff</a> and it looks like it has no any license.</li>
     <li>Google Custom Search is licensed under own <a href="https://support.google.com/customsearch/answer/1714300">custom license</a>.</li>
     <li>Sharethis have own <a href="http://www.sharethis.com/legal/publisher-terms-of-use">custom license</a> too.</li>
     <li><a href="https://www.redhat.com/promo/fonts/">Liberation font</a> is licensed under <a href="http://scripts.sil.org/OFL">The SIL Open Font License</a>.</li>
diff --git a/blog/archive.html b/blog/archive.html
index d370dbc..85175d8 100644
--- a/blog/archive.html
+++ b/blog/archive.html
@@ -16,21 +16,25 @@ back: 2
       {% assign month = post.date | date: "%B, %Y" %}
     {% endfor %}
     <label class="spoiler">
-      <input type="checkbox" class="bo"/>
-      <div class="title">{{ month }} (show)</div>
-      <div class="body">
-      {% for post in site.categories.en %}
-        {% assign new_month = post.date | date: "%B, %Y" %}
-        {% if new_month != month %}
-            </div>
-          </label>
-          <label class="spoiler">
-            <input type="checkbox" class="bo"/>
-            <div class="title">{{ new_month }} (show)</div>
-            <div class="body">
-        {% endif %}
-        {% assign month = post.date | date: "%B, %Y" %}
-        <i>{{ post.date | date_to_string }}</i> &raquo; <a name="{{ post.short }}" class="anchor" href="#{{ post.short }}"><span class="octicon octicon-link"></span></a><a href="{{ post.url }}">{{ post.title }}</a> ({{ post.tags }})<br>
-      {% endfor %}
+      <input type="checkbox" tabindex="-1">
+      <div class="box">
+        <b>{{ month }}</b> <span class="close" style="float:right;">(hide)</span><span class="open" style="float:right;">(show)</span>
+        <blockquote>
+          {% for post in site.categories.en %}
+            {% assign new_month = post.date | date: "%B, %Y" %}
+            {% if new_month != month %}
+        </blockquote>
+      </div>
+    </label>
+    <label class="spoiler">
+      <input type="checkbox" tabindex="-1">
+      <div class="box">
+        <b>{{ new_month }}</b> <span class="close" style="float:right;">(hide)</span><span class="open" style="float:right;">(show)</span>
+        <blockquote>
+            {% endif %}
+            {% assign month = post.date | date: "%B, %Y" %}
+            <i>{{ post.date | date_to_string }}</i> &raquo; <a name="{{ post.short }}" class="anchor" href="#{{ post.short }}"><span class="octicon octicon-link"></span></a><a href="{{ post.url }}">{{ post.title }}</a> ({{ post.tags }})<br>
+          {% endfor %}
+        </blockquote>
       </div>
     </label>
diff --git a/index.html b/index.html
index 1d91adc..ed9df3d 100644
--- a/index.html
+++ b/index.html
@@ -11,14 +11,14 @@ title: arcanis' homepage
         <h1>{{ page.title }}</h1>
 
         <label class="spoiler">
-          <input type="checkbox" class="bo"/>
-          <div class="title"><a href="/blog/">Latest posts:</a></div>
-          <div class="body">
-            <p>
-              {% for post in site.categories.en limit:3 %}
-                <a href="{{ post.url }}">{{ post.title }}</a><br>
-              {% endfor %}
-            </p>
+          <input type="checkbox" tabindex="-1">
+          <div class="box">
+            <a href="/blog/">My blog</a> <span class="close">(hide)</span><span class="open">(show)</span>
+            <blockquote>
+            {% for post in site.categories.en limit:3 %}
+              <a href="{{ post.url }}">{{ post.title }}</a><br>
+            {% endfor %}
+            </blockquote>
           </div>
         </label>
         <p class="view"><a href="/projects/">My projects</a></p>
diff --git a/resources/css/styles.css b/resources/css/styles.css
index ea0facd..167d76a 100644
--- a/resources/css/styles.css
+++ b/resources/css/styles.css
@@ -1,28 +1,51 @@
 /* spoiler */
+.spoiler > input + .box > blockquote {
+  display: none;
+}
+.spoiler > input:checked + .box > blockquote {
+  display: block;
+}
+.spoiler > input[type="checkbox"] {
+  display: none;
+ }
+.spoiler > input[type="checkbox"]:focus {
+  outline: none;
+}
+.spoiler span.close,
+.spoiler span.open {
+  text-align: right;
+  font-style: italic;
+}
+.spoiler > input + .box > span.close {
+  display: none;
+}
+.spoiler > input:checked + .box > span.close {
+  display: inline;
+}
+.spoiler > input:checked + .box > span.open {
+  display: none;
+}
+.spoiler > input + .box > span.open {
+  display: inline;
+}
+.spoiler blockquote,
 .spoiler {
-    display: block;
-    background: #dcdcdc;
-    text-decoration: none;
-    color: #555555;
-    border-radius: 5px;
-    padding: 0 0 0 0;
-    margin: 0 0 0 0;
+  border-radius: 5px;
+  -webkit-border-radius: 5px;
+  -khtml-border-radius: 5px;
+  -moz-border-radius: 5px;
+  -o-border-radius: 5px;
+  -ms-border-radius: 5px;
 }
-.spoiler > .title {
-    font-weight: bold;
+.spoiler {
+  overflow-x: hidden;
 }
-.spoiler > .body {
-    padding: 4px;
-    font-weight: 300;
-    font-size: 11pt;
-    text-align: justify;
-    display: none;
-}
-.spoiler > .bo {
-    display: none;
-}
-.spoiler > :checked ~ .body {
-    display: block;
+.spoiler blockquote {
+  min-height: 23px;
+  margin: 0;
+  padding: 4px 4px 4px 10px;
+  border-style: none;
+  font-style: normal;
 }
 
 /* Liberation font ^^ */
@@ -30,167 +53,165 @@
   font-family: "Liberation Serif";
   font-style: normal;
   font-weight: 300;
-  src:         local("Liberation Serif"),
-               local("Liberation Serif Regular"),
-               local("LiberationSerif-Regular"),
-               url(LiberationSerif-Regular.ttf);
+  src: local("Liberation Serif"),
+       local("Liberation Serif Regular"),
+       local("LiberationSerif-Regular"),
+       url(LiberationSerif-Regular.ttf);
 }
 @font-face {
   font-family: "Liberation Serif";
   font-style: italic;
   font-weight: 300;
-  src:         local("Liberation Serif Italic"),
-               local("LiberationSerif-Italic"),
-               url(LiberationSerif-Italic.ttf);
+  src: local("Liberation Serif Italic"),
+       local("LiberationSerif-Italic"),
+       url(LiberationSerif-Italic.ttf);
 }
 @font-face {
   font-family: "Liberation Serif";
   font-style: normal;
   font-weight: 600;
-  src:         local("Liberation Serif Bold"),
-               local("LiberationSerif-Bold"),
-               url(LiberationSerif-Bold.ttf);
+  src: local("Liberation Serif Bold"),
+       local("LiberationSerif-Bold"),
+       url(LiberationSerif-Bold.ttf);
 }
 @font-face {
   font-family: "Liberation Serif";
   font-style: italic;
   font-weight: 600;
-  src:         local("Liberation Serif Bold Italic"),
-               local("Liberation Serif BoldItalic"),
-               local("LiberationSerif-BoldItalic"),
-               url(LiberationSerif-BoldItalic.ttf);
+  src: local("Liberation Serif Bold Italic"),
+       local("Liberation Serif BoldItalic"),
+       local("LiberationSerif-BoldItalic"),
+       url(LiberationSerif-BoldItalic.ttf);
 }
 @font-face {
   font-family: "Liberation Mono";
   font-style: normal;
   font-weight: 300;
-  src:         local("Liberation Mono"),
-               local("LiberationMono-Regular"),
-               url(LiberationMono-Regular.ttf);
+  src: local("Liberation Mono"),
+       local("LiberationMono-Regular"),
+       url(LiberationMono-Regular.ttf);
 }
 
 
 body {
-  padding:50px;
-  font:14px/1.5 "Liberation Serif", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
-  color:#555555;
-  font-weight:300;
+  padding: 50px;
+  font: 14px/1.5 "Liberation Serif", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #555555;
+  font-weight: 300;
 }
 
 h1, h2, h3, h4, h5, h6 {
-  color:#222222;
-  margin:0 0 20px;
+  color: #222222;
+  margin: 0 0 20px;
 }
 
 p, ul, ol, table, pre, dl {
-  margin:0 0 20px;
+  margin: 0 0 20px;
 }
 
 h1, h2, h3 {
-  line-height:1.1;
+  line-height: 1.1;
 }
 
 h1 {
-  font-size:28px;
+  font-size: 28px;
 }
 
 h2 {
-  color:#393939;
+  color: #393939;
 }
 
 h3, h4, h5, h6 {
-  color:#494949;
+  color: #494949;
 }
 
 a {
-  color:#39c;
-  font-weight:350;
-  text-decoration:none;
+  color: #39c;
+  font-weight: 350;
+  text-decoration: none;
 }
 
 a small {
-  font-size:11px;
-  color:#777;
-  margin-top:-0.6em;
-  display:block;
+  font-size: 11px;
+  color: #777;
+  margin-top: -0.6em;
+  display: block;
 }
 
 .wrapper {
-  width:860px;
-  margin:0 auto;
+  width: 860px;
+  margin: 0 auto;
 }
 
 blockquote {
-  border-left:1px solid #e5e5e5;
-  margin:0;
-  padding:0 0 0 20px;
-  font-style:italic;
+  border-left: 1px solid #e5e5e5;
+  margin: 0;
+  padding: 0 0 0 20px;
+  font-style: italic;
 }
 
 code, pre {
   font-family: "Liberation Mono", Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
-  color:#333;
-  font-size:12px;
+  color: #333;
+  font-size: 12px;
 }
 
 pre {
-  padding:8px 15px;
+  padding: 8px 15px;
   background: #f8f8f8;
-  border-radius:5px;
-  border:1px solid #e5e5e5;
+  border-radius: 5px;
+  border: 1px solid #e5e5e5;
   overflow-x: auto;
 }
 
 @external .codeblock;
 div.codeblock {
-  padding:8px 15px;
-  height:200px;
-  border:1px solid #e5e5e5;
+  padding: 8px 15px;
+  height: 200px;
+  border: 1px solid #e5e5e5;
   font-family: "Liberation Mono", Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
-  color:#333;
-  font-size:12px;
+  color: #333;
+  font-size: 12px;
   background: #f8f8f8;  
-  overflow:auto;
-  display:block;
-  white-space:pre;
+  overflow: auto;
+  display: block;
+  white-space: pre;
 }
 
 table {
-  width:100%;
-  border-collapse:collapse;
+  width: 100%;
+  border-collapse: collapse;
 }
 
 th, td {
-  text-align:left;
-  padding:5px 10px;
-  border-bottom:1px solid #e5e5e5;
+  text-align: left;
+  padding: 5px 10px;
+  border-bottom: 1px solid #e5e5e5;
 }
 
 dt {
-  color:#444;
-  font-weight:700;
+  color: #444;
+  font-weight: 700;
 }
 
 th {
-  color:#444;
+  color: #444;
 }
 
 img {
-  max-width:100%;
+  max-width: 100%;
 }
 
 header {
-  width:270px;
-  float:left;
-  position:fixed;
+  width: 270px;
+  float: left;
+  position: fixed;
 }
 
 header ul {
-  list-style:none;
-  height:40px;
-  
-  padding:0;
-  
+  list-style: none;
+  height: 40px;
+  padding: 0;
   background: #eee;
   background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd));
@@ -198,160 +219,148 @@ header ul {
   background: -o-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
   background: -ms-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
   background: linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
-  
-  border-radius:5px;
-  border:1px solid #d2d2d2;
-  box-shadow:inset #fff 0 1px 0, inset rgba(0,0,0,0.03) 0 -1px 0;
-  width:270px;
+  border-radius: 5px;
+  border: 1px solid #d2d2d2;
+  box-shadow: inset #fff 0 1px 0, inset rgba(0,0,0,0.03) 0 -1px 0;
+  width: 270px;
 }
 
 header li {
-  width:89px;
-  float:left;
-  border-right:1px solid #d2d2d2;
-  height:40px;
+  width: 89px;
+  float: left;
+  border-right: 1px solid #d2d2d2;
+  height: 40px;
 }
 
 header ul a {
-  line-height:1;
-  font-size:11px;
-  color:#999;
-  display:block;
-  text-align:center;
-  padding-top:6px;
-  height:40px;
+  line-height: 1;
+  font-size: 11px;
+  color: #999;
+  display: block;
+  text-align: center;
+  padding-top: 6px;
+  height: 40px;
 }
 
 strong {
-  color:#222;
-  font-weight:700;
+  color: #222;
+  font-weight: 700;
 }
 
 header ul li + li {
-  width:88px;
-  border-left:1px solid #fff;
+  width: 88px;
+  border-left: 1px solid #fff;
 }
 
 header ul li + li + li {
-  border-right:none;
-  width:89px;
+  border-right: none;
+  width: 89px;
 }
 
 header ul a strong {
-  font-size:14px;
-  display:block;
-  color:#222;
+  font-size: 14px;
+  display: block;
+  color: #222;
 }
 
 section {
-  width:500px;
-  float:right;
-  padding-bottom:50px;
+  width: 500px;
+  float: right;
+  padding-bottom: 50px;
 }
 
 small {
-  font-size:11px;
+  font-size: 11px;
 }
 
 hr {
-  border:0;
-  background:#e5e5e5;
-  height:1px;
-  margin:0 0 20px;
+  border: 0;
+  background: #e5e5e5;
+  height: 1px;
+  margin: 0 0 20px;
 }
 
 footer {
-  width:270px;
-  float:left;
-  position:fixed;
-  bottom:50px;
+  width: 270px;
+  float: left;
+  position: fixed;
+  bottom: 50px;
 }
 
 @media print, screen and (max-width: 960px) {
-  
   div.wrapper {
-    width:auto;
-    margin:0;
+    width: auto;
+    margin: 0;
   }
-  
   header, section, footer {
-    float:none;
-    position:static;
-    width:auto;
+    float: none;
+    position: static;
+    width: auto;
   }
-  
   header {
-    padding-right:320px;
+    padding-right: 320px;
   }
-  
   section {
-    border:1px solid #e5e5e5;
-    border-width:1px 0;
-    padding:20px 0;
-    margin:0 0 20px;
+    border: 1px solid #e5e5e5;
+    border-width: 1px 0;
+    padding: 20px 0;
+    margin: 0 0 20px;
   }
-  
   header a small {
-    display:inline;
+    display: inline;
   }
-  
   header ul {
-    position:absolute;
-    right:50px;
-    top:52px;
+    position: absolute;
+    right: 50px;
+    top: 52px;
   }
 }
 
 @media print, screen and (max-width: 720px) {
   body {
-    word-wrap:break-word;
+    word-wrap: break-word;
   }
-  
   header {
-    padding:0;
+    padding: 0;
   }
-  
   header ul, header p.view {
-    position:static;
+    position: static;
   }
-  
   pre, code {
-    word-wrap:normal;
+    word-wrap: normal;
   }
 }
 
 @media print, screen and (max-width: 480px) {
   body {
-    padding:15px;
+    padding: 15px;
   }
-  
   header ul {
-    display:none;
+    display: none;
   }
 }
 
 @media print {
   body {
-    padding:0.4in;
-    font-size:12pt;
-    color:#444;
+    padding: 0.4in;
+    font-size: 12pt;
+    color: #444;
   }
 }
 
 /* COMMENTS */
 .comment {
-    background-color: transparent;
-    border-color: #CACACA;
-    border-style: solid;
-    border-width: 1px;
-    color: black;
-    display: block;
-    margin-bottom: 10px;
-    margin-top: 10px;
-    padding: 0px;
-    width: 100%;
+  background-color: transparent;
+  border-color: #CACACA;
+  border-style: solid;
+  border-width: 1px;
+  color: black;
+  display: block;
+  margin-bottom: 10px;
+  margin-top: 10px;
+  padding: 0px;
+  width: 100%;
 }
-
 .comment .commentheader {
   border-bottom-color: #CACACA;
   border-bottom-style: solid;
@@ -378,7 +387,6 @@ footer {
   white-space: nowrap;
   width: 100%;
 }
-
 .comment .commentheader .commentgravatar {
   background-attachment: scroll;
   background-clip: border-box;
@@ -410,15 +418,12 @@ footer {
   white-space: nowrap;
   width: 20px;
 }
-
 .comment .commentheader a:link {
   text-decoration: none;
 }
-
 .comment .commentheader a:hover {
-  border-bottom:1px solid;
+  border-bottom: 1px solid;
 }
-
 .comment .commentheader .commentuser {
   background-color: transparent;
   color: black;
@@ -441,7 +446,6 @@ footer {
   white-space: nowrap;
   width: 0px;
 }
-
 .comment .commentheader .commentdate {
   background-color: transparent;
   color: #777;
@@ -463,7 +467,6 @@ footer {
   white-space: nowrap;
   width: 20em;
 }
-
 .comment .commentbody {
   background-attachment: scroll;
   background-clip: border-box;
@@ -483,24 +486,20 @@ footer {
   width: 96%;
   word-wrap: break-word;
 }
-
 .comment .commentbody p {
   margin-bottom: 0.5em;
   margin-top: 0.5em;
   margin-left: 0em;
   margin-right: 0em;
 }
-
 .comment .commentbody pre {
   border: 0px solid #ddd;
   background-color: #eef;
   padding: 0 .4em;
 }
-
 .comment .commentbody pre code {
   border: 0px solid #ddd;
 }
-
 .comment .commentbody code {
   border: 1px solid #ddd;
   background-color: #eef;
diff --git a/ru/authors.html b/ru/authors.html
index f10fdf1..d663a6d 100644
--- a/ru/authors.html
+++ b/ru/authors.html
@@ -23,7 +23,7 @@ Evgeniy Alekseev wrote this file. As long as you retain this notice you can do w
     <li><a href="http://jekyllrb.com/">Jekyll</a>, который лицензирован под лицензией <a href="http://opensource.org/licenses/MIT">MIT</a>.</li>
     <li>Исходная тема была создана <a href="https://github.com/orderedlist/minimal">Steve Smith</a> и лицензирована под <a href="http://creativecommons.org/licenses/by/3.0">Creative Commons Attribution-ShareAlike 3.0 Unported License</a>.</li>
     <li>Блок комментариев был создан <a href="https://github.com/izuzak/izuzak.github.com">Ivan Žužak</a> и лицензирован под лицензией <a href="http://opensource.org/licenses/MIT">MIT</a>.</li>
-    <li>Код для спойлеров был предложен <a href="http://www.cyberforum.ru/post5368179.html">markeley</a>, и, судя по всему, он не имеет никакой лицензии.</li>
+    <li>Код для спойлеров был предложен <a href="http://www.cyberforum.ru/post5368179.html">markeley</a> и <a href="http://habrahabr.ru/post/167151/">Defff</a>, и, судя по всему, он не имеет никакой лицензии.</li>
     <li>Google Custom Search имеет собственную <a href="https://support.google.com/customsearch/answer/1714300">кастомную лицензию</a>.</li>
     <li>Sharethis тоже имеет собственную <a href="http://www.sharethis.com/legal/publisher-terms-of-use">кастомную лицензию</a>.</li>
     <li><a href="https://www.redhat.com/promo/fonts/">Liberation font</a> лицензирован под <a href="http://scripts.sil.org/OFL">The SIL Open Font License</a>.</li>
diff --git a/ru/blog/archive.html b/ru/blog/archive.html
index 3637207..143ef4e 100644
--- a/ru/blog/archive.html
+++ b/ru/blog/archive.html
@@ -18,21 +18,25 @@ back: 2
       {% assign new_month = post.date | date: "%B, %Y" %}
     {% endfor %}
     <label class="spoiler">
-      <input type="checkbox" class="bo"/>
-      <div class="title">{% include longdate_to_ru.html %} (показать)</div>
-      <div class="body">
-      {% for post in site.categories.ru %}
-        {% assign new_month = post.date | date: "%B, %Y" %}
-        {% if new_month != month %}
-            </div>
-          </label>
-          <label class="spoiler">
-            <input type="checkbox" class="bo"/>
-            <div class="title">{% include longdate_to_ru.html %} (показать)</div>
-            <div class="body">
-        {% endif %}
-        {% assign month = post.date | date: "%B, %Y" %}
-        <i>{% include shortdate_to_ru.html %}</i> &raquo; <a name="{{ post.short }}" class="anchor" href="#{{ post.short }}"><span class="octicon octicon-link"></span></a><a href="{{ post.url }}">{{ post.title }}</a> ({{ post.tags }})<br>
-      {% endfor %}
+      <input type="checkbox" tabindex="-1">
+      <div class="box">
+        <b>{% include longdate_to_ru.html %}</b> <span class="close" style="float:right;">(скрыть)</span><span class="open" style="float:right;">(показать)</span>
+        <blockquote>
+          {% for post in site.categories.ru %}
+            {% assign new_month = post.date | date: "%B, %Y" %}
+            {% if new_month != month %}
+        </blockquote>
+      </div>
+    </label>
+    <label class="spoiler">
+      <input type="checkbox" tabindex="-1">
+      <div class="box">
+        <b>{% include longdate_to_ru.html %}</b> <span class="close" style="float:right;">(скрыть)</span><span class="open" style="float:right;">(показать)</span>
+        <blockquote>
+            {% endif %}
+            {% assign month = post.date | date: "%B, %Y" %}
+            <i>{% include shortdate_to_ru.html %}</i> &raquo; <a name="{{ post.short }}" class="anchor" href="#{{ post.short }}"><span class="octicon octicon-link"></span></a><a href="{{ post.url }}">{{ post.title }}</a> ({{ post.tags }})<br>
+          {% endfor %}
+        </blockquote>
       </div>
     </label>
diff --git a/ru/index.html b/ru/index.html
index 274b699..2e6862d 100644
--- a/ru/index.html
+++ b/ru/index.html
@@ -12,14 +12,14 @@ title: arcanis
         <h1>{{ page.title }}</h1>
 
         <label class="spoiler">
-          <input type="checkbox" class="bo"/>
-          <div class="title"><a href="/ru/blog/">Блог</a></div>
-          <div class="body">
-            <p>
-              {% for post in site.categories.ru limit:3 %}
-                <a href="{{ post.url }}">{{ post.title }}</a><br>
-              {% endfor %}
-            </p>
+          <input type="checkbox" tabindex="-1">
+          <div class="box">
+            <a href="/ru/blog/">Блог</a> <span class="close">(скрыть)</span><span class="open">(показать)</span>
+            <blockquote>
+            {% for post in site.categories.ru limit:3 %}
+              <a href="{{ post.url }}">{{ post.title }}</a><br>
+            {% endfor %}
+            </blockquote>
           </div>
         </label>
         <p class="view"><a href="/ru/projects/">Проекты</a></p>