[JS] css target toggle

http://forum.valorsolo.com/viewtopic.php?f=21&t=228

by kleinejan

HTML

<div>

    <a href="#hide" class="hide" id="hide">[show]</a>

    <a href="#show" class="show" id="show">[hide]</a>

             <div  id="drop" class="list">

                <form action="http://valorsolo.com/demo/post.php" method="POST">

                    subject:<br />

                    <input type="text" name="subject" size="50" /><br />

                    your comment:<br />

                    <textarea name="yourpost" rows="2" cols="60"></textarea><br />

                    <input type="submit" name="submit" value="Post Topic" class="btn" onmouseover="this.className='btn btnhov'" onmouseout="this.className='btn'" />

                <br /><br />

                </form>

            </div>

  </div>

  <div><br /><br />

  <iframe src="http://valorsolo.com/demo/post.txt" style="border:1px solid #000;width:600px;height:400px;white-space:normal;"></iframe>

  </div>

CSS

.list {display:none; }

      .show {display: none; }

      .hide:target + .show {display: inline; }

      .hide:target {display: none; }

      .hide:target ~ .list {display:inline; }

      @media print { .hide, .show { display: none; } }