HTML Form How to - Click to show and click else where to hide

Question

We would like to know how to click to show and click else where to hide.

Answer


<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        .spoiler { <!-- w  w  w  .java2  s.c  o  m-->
            background: #EEE; 
            color: black; 
            width: 500px; 
            padding: 40px; 
            display: none; 
        }
        .spoilerbutton:focus + .spoiler { display: block; }
    </style>
</head>
    <body>
        <input class="spoilerbutton" type="button" value="Hidden">
        <div class="spoiler">java2s.com</div>
    </body>
</html>

The code above is rendered as follows: