Use a radio input to make a div visible with CSS

I would like to use a radio input to make a div visible when it's selected. Here's what I've got but it doesn't work.

HTML:

<input type="radio" name="menu" id="btn_commandprompt" value="1"></input>
                <label for="btn_commandprompt"">
                    <div id="btn_commandprompt_design"></div>
                </label>

<div id="commandprompt"></div>

CSS:

    #commandprompt{
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
}


#btn_commandprompt:checked ~ #commandprompt{
    display: block;
}

Thanks

Solution

I have modify your code. its now working...


  <style>
   #commandprompt{
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
}


#btn_commandprompt:checked ~ #commandprompt{
    display: block;
}
  </style>

<body>
<input type="radio" name="menu" id="btn_commandprompt" value="1"> Show Me</input>
<input type="radio" name="menu" id="btn_acceuil" value="1"> Hide Me</input>

<div id="btn_commandprompt_design"></div>

<div id="commandprompt">ooh!!</div>
</body>