Ukryj listę zawartości Pokaż tylko CSS, bez użycia javascript

Question

Jul 18, 2013, 08:41 PM

Ukryj listę zawartości Pokaż tylko CSS, bez użycia javascript

Szukałem dobrej sztuczki, aby utworzyć zawartość Hide / Show lub listę zawierającą tylko CSS i bez javascript. Udało mi się to zrobić:

<!DOCTYPE html>
<head>

   <style>
      #cont {display: none; }
      .show:focus + .hide {display: inline; }
      .show:focus + .hide + #cont {display: block;}
   </style>

</head>
<body>

   <div>
        <a href="#show"class="show">[Show]</a>
        <a href="#hide"class="hide">/ [Hide]</a>
        <div id="cont">Content</div>
   </div>

</body>
</html>

Demo tutaj:http://jsfiddle.net/6W7XD/ I działa, ale nie tak, jak powinien. Oto problem: po wyświetleniu zawartości możesz ją ukryć, klikając „w dowolnym miejscu na stronie”. Jak to wyłączyć? jak ukryć zawartość „tylko”, klikając Ukryj? Z góry dziękuję!