Radio button with div show hide JS

Radio button with div show hide JS

by erwin prasetyo

HTML

<div>
    <label>
        <input type="radio" name="colorRadio" value="debet-card">Debet Card</label>
    <label>
        <input type="radio" name="colorRadio" value="credit-card">Credit Card</label>
</div>
<div class="debet-card card-status">You have selected <strong>debet card</strong> so i am here</div>
<div class="credit-card card-status">You have selected <strong>credit card</strong> so i am here</div>

CSS

.card-status {
     padding: 20px;
     display: none;
     margin-top: 20px;
 }
 .debet-card {
     background: green;
 }
 .credit-card {
     background: red;
 }

JavaScript

$(document).ready(function () {
        $('input[type="radio"]').click(function () {
            if ($(this).attr("value") == "debet-card") {
                $(".card-status").hide();
                $(".debet-card").show();
            }
            if ($(this).attr("value") == "credit-card") {
                $(".card-status").hide();
                $(".credit-card").show();
            }
        });
    });