title: How to hide content when a radio button is not checked and enable other content to be viewed
body: <p>Basically i want to set up two radio buttons, one called 'Login' and the other called 'Register'</p>
  
  <p>When the 'Login' radio button is checked i want the login section to be shown only and vise versa for the 'Register' button.</p>
  
  <p>Any help is greatly appreciated</p>
  
  <pre><code>&lt;div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
                  &lt;h2 class="text-center"&gt;&lt;img src="//placehold.it/110" class="img-circle"&gt;&lt;br&gt;Login&lt;/h2&gt;
                  &lt;div class="container"&gt;
    &lt;form role="form"&gt;
      &lt;label class="radio-inline"&gt;
        &lt;input type="radio" name="optradio"&gt;Login
      &lt;/label&gt;
      &lt;label class="radio-inline"&gt;
        &lt;input type="radio" name="optradio"&gt;Register
      &lt;/label&gt;
    &lt;/form&gt;
  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div style="width:602px"class="modal-body row"&gt;
                                      &lt;form action="" method="post"&gt;
                                              &lt;div class="row"&gt;
                                              &lt;div style="padding-left:20px; padding-right:-20px class="col-sm-12 text-center"&gt;
                                          &lt;div class="form-group"&gt;
                                              &lt;label for="username"&gt;Username&lt;/label&gt;
                                              &lt;input id="name" name="username" placeholder="Username" type="text" tabindex="1" class="form-control"&gt;
                                          &lt;div class="form-group"&gt;
                                              &lt;label for="password"&gt;Password&lt;/label&gt;
                                              &lt;input id="password" name="password" placeholder="Password" type="password"   tabindex="2" class="form-control"&gt;
                                              &lt;br&gt;
                                              &lt;input class="form-control btn btn-success" name="submit" type="submit" value="Log In" id="submit" tabindex="4" &gt;
                                              &lt;h4&gt;Not a member? &lt;label class="checkbox-Warning"&gt;&lt;input type="checkbox" value=""&gt;&lt;/label&gt;&lt;/h4&gt;
                                              &lt;!-- come back here and finished login and registration --&gt;
  
  
  
                                      &lt;div class="text-center"&gt;&lt;h3 style="text-align:center"&gt;&lt;b&gt;Register&lt;/b&gt;&lt;/h3&gt;&lt;/div&gt;
                                      &lt;form id="register-form" action="index.php" method="post" role="form"&gt;
                                          &lt;div class="form-group has-feedback"&gt;
                                              &lt;label for="username"&gt;Username&lt;/label&gt;
                                              &lt;span class="form-control-feedback input-validator-feedback" data-fieldname="username"&gt;&lt;/span&gt;
                                              &lt;input type="text" name="newusername" id="newusername" tabindex="1" class="form-control validate-input" placeholder="Username" value="" autocomplete="off"&gt;
                                          &lt;/div&gt;
                                          &lt;div class="form-group has-feedback"&gt;
                                              &lt;label for="email"&gt;Email Address&lt;/label&gt;
                                              &lt;span class="form-control-feedback input-validator-feedback" data-fieldname="email"&gt;&lt;/span&gt;
                                              &lt;input type="text" name="newemail" id="email" tabindex="2" class="form-control validate-input" placeholder="Email Address" value="" autocomplete="off"&gt;
                                          &lt;/div&gt;
                                          &lt;div class="form-group"&gt;
                                              &lt;label for="password"&gt;Password&lt;/label&gt;
                                              &lt;input type="password" name="newpassword1" id="password" tabindex="3" class="form-control" placeholder="Password" autocomplete="off"&gt;
                                          &lt;/div&gt;
                                          &lt;div class="form-group"&gt;
                                              &lt;label for="confirm-password"&gt;Confirm Password&lt;/label&gt;
                                              &lt;input type="password" name="confirm-password1" tabindex="4" id="confirm-password1" class="form-control" placeholder="Confirm Password" autocomplete="off"&gt;
                                              &lt;br&gt;
                                                  &lt;input type="submit" name="register-submit" id="register-submit" tabindex="5" class="form-control btn btn-success" value="Register"&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;  
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>so all of the login should be visible when the login radio button is checked and all the register components should be hidden </p>