Collapsible content using radio button with CSS - HTML CSS CSS Form

HTML CSS examples for CSS Form:input radio button

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input radio button

Description

Collapsible content using radio button with CSS

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

label[for=textarea-a],
#textarea-a {
   display: none;
}
#radio-mini-2:checked ~ label[for=textarea-a],
#radio-mini-2:checked ~ #textarea-a {
   display: block;
}


      </style> 
 </head> <!--from  w  w w  .j  a v  a2  s . c  om-->
 <body> 
  <form action="#" method="post"> 
   <input type="radio" name="radio-mini" id="radio-mini-1" value="choice-1"> 
   <label for="radio-mini-1">No</label> 
   <input type="radio" name="radio-mini" id="radio-mini-2" value="choice-2"> 
   <label for="radio-mini-2">Yes</label> 
   <label for="textarea-a">Textarea:</label> 
   <textarea name="textarea" id="textarea-a">
    </textarea> 
  </form>  
 </body>
</html>

Related Tutorials