Javascript не работает должным образом

function validate() {
  if (document.getElementById('paypal').checked) {
    //Paypal radio button is checked
    $(".input-fields").slideDown("slow");
  } else if (document.getElementById('card').checked) {
    //Card radio button is checked
    $(".input-fields").slideUp("slow");
  };
}

document.getElementById("card").addEventListener("change", validate);
document.getElementById("paypal").addEventListener("change", validate);

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "panel-body">
  <h2 class = "title">Checkout</h2>

  <div class = "bar">
    <div class = "step active"></div>
    <div class = "step active"></div>
    <div class = "step"></div>
    <div class = "step"></div>
  </div>

  <div class = "payment-method">
    <label for = "card" class = "method card">
                        <div class = "card-logos">
                            <img src = "img/visa_logo.png" />
                            <img src = "img/mastercard_logo.png" />
                        </div>

                        <div class = "radio-input">
                            <input id = "card" type = "radio" name = "payment"> Pay $<%= total %> with credit card
                        </div>
                    </label>

    <label for = "paypal" class = "method paypal">
                        <img src = "img/paypal_logo.png" />
                        <div class = "radio-input">
                            <input id = "paypal" type = "radio" name = "payment"> Pay $<%= total %> with PayPal
                        </div>
                    </label>
  </div>

  <div class = "input-fields">
    <div class = "column-1">
      <label for = "cardholder">Cardholder's Name</label>
      <input type = "text" id = "cardholder" />

      <div class = "small-inputs">
        <div>
          <label for = "date">Valid thru</label>
          <input type = "text" id = "date" placeholder = "MM / YY" />
        </div>

        <div>
          <label for = "verification">CVV / CVC *</label>
          <input type = "password" id = "verification" />
        </div>
      </div>

    </div>
    <div class = "column-2">
      <label for = "cardnumber">Card Number</label>
      <input type = "password" id = "cardnumber" />

      <span class = "info">* CVV or CVC is the card security code, unique three digits number on the back of your card separate from its number.</span>
    </div>
  </div>
</div>