RNMqdY

README.markdown

Styled RadioButtons.

A Pen by Ventsislav Mladenov on CodePen.

License.

index.html

<div class="demo-radios">  
  <label>
    <input type="radio" name="demo" data-kind="0" checked="checked" />
    <p>
      <span class="title">Read Only Demo</span>
      <span class="info">I want a 10-day read only demo to test  SharePlus Enterprise.</span>    
    </p>
  </label>
  <label>
    <input type="radio" name="demo" data-kind="0" />
    <p>
      <span class="title">Read and Write Demo</span>
      <span class="info">I want a 10-day read and write demo to test  SharePlus Enterprise.</span>
    </p>
  </label>  
  <label>
    <input type="radio" name="demo" data-kind="1" />
    <p>
      <span class="title">Private Demo</span>
      <span class="info">Get contact with a Sales representative.</span>
    </p>
  </label>
</div>
<h3>
  We need some information to create your demo
</h3>
<div class="readwritedemo">
</div>
<div class="privatedemo">
</div>

script.js

$(function() {
  $("input[data-kind=0],input[data-kind=1]").change(function() {
    if ($("input[data-kind=0]:checked").length) {
      $("div.readwritedemo").show();
    } else {
      $("div.readwritedemo").hide();
    }
    if ($("input[data-kind=1]:checked").length) {
      $("div.privatedemo").show();
    } else {
      $("div.privatedemo").hide();
    }
  });
});

style.scss

$background-unchecked: #e2e2e2;
$background-checked: #d1f0d5;
.demo-radios {
  &::after {
    content: '';
    clear: both;
    display: table;
  }
  
  label {    
    display: block;
    float: left;
    margin-right: 10px;
    span {
      color: rgb(40, 40, 40);
      display: block;
      &.title {
        font-size: 17px;
        font-weight: bold;
      }
      &.info {
        margin-top: 5px;
      }
    }
    
    p {      
      display: block;
      box-sizing:border-box;
      width: 230px;
      height: 125px;
      margin: 0;
      padding: 20px 10px;
      background-color: $background-unchecked;
    }
  }
  
  input:checked + p {
    background-color: $background-checked;
  }
  
  input[type='radio'] {
    display: none;
  }
}

div.readwritedemo {
  background-color: red;
  height: 20px;
}
div.privatedemo {
  display: none;
  background-color: green;
  height: 20px;
}