Changing Button Text

by gamehendgeVA

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-12">
<div>Is the address you'd like to use displayed below? If so, select the corresponding box below. Or, you can <a>enter a different address</a>.</div> 
<div class="radioPanel">
<label class="fullWidth">
<input type="radio" name="selectAddress" class="card-input-element d-none hideOffScreen addressRadio" id="address1" value="address1">
<div class="card card-body bg-light d-flex flex-row justify-content-between align-items-center radioCard">
<div class="addressField">John Doe</div>
<div class="addressField">123 Anytown St.</div>
<div class="addressField">Springfield, MD 22365</div>
<div class="row">
<div class="col-md-12 text-left">
<div class="deliverButton" style="margin-top:12px;">
<div type="button" class="btn btn-primary-custom" style="margin-right:10px;">Deliver to this Address</div>
</div>
<div class="selectedAddressButton" style="margin-top:12px;">
<div style="margin-top:12px;"><div type="button" class="btn btn-success-custom" style="margin-right:10px;"><i class="fa fa-check" aria-hidden="true" style="padding-right:6px;"></i>Selected Address</div></div>
</div> 
</div>
</div>
<div class="row">
<div class="col-md-12 text-left =" style="margin-top:15px;">  
<button type="button" class="btn btn-secondary-custom" style="margin-right:10px;">Edit</button>
<button type="button" class="btn btn-secondary-custom">Delete</button>   
</div>
</div>
</div>
</label>
<label class="fullWidth" style="margin-top:10px;">
<input type="radio" name="selectAddress" class="card-input-element d-none hideOffScreen addressRadio" id="address2"...

CSS

label.fullWidth {
  width: 100%;
  font-size: 1rem;
}
.card-input-element+.card {
  /*height: calc(36px + 2*1rem);*/
  color: #005499;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 2px solid transparent;
  border-radius: 4px;
  border: 2px solid #ccc;
}
.card-input-element+.card:hover {
  cursor: pointer;
  background-color:#eee;
  border: 2px solid #005499;
}
.card-input-element:checked+.card {
  border: 2px solid #c3e6cb;
    background-color:#d4edda;
  -webkit-transition: border .3s;
  -o-transition: border .3s;
  transition: border .3s;
  content: '\f00c';
  color: #0e6d2e;
  font-family: 'FontAwesome';
  font-size: 24px;
  -webkit-animation-name: fadeInCheckbox;
  animation-name: fadeInCheckbox;
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.card-input-element:checked+.card::after {
  content: '\f00c';
  color: #0e6d2e;
  font-family: 'FontAwesome';
  font-size: 24px;
  -webkit-animation-name: fadeInCheckbox;
  animation-name: fadeInCheckbox;
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;top: 0;
  right: 5px;
}
@-webkit-keyframes fadeInCheckbox {
  from {
    opacity: 0;
    -webkit-transform: rotateZ(-20deg);
  }
  to {
    opacity: 1;
    -webkit-transform: rotateZ(0deg);
  }
}
@keyframes fadeInCheckbox {
  from {
    opacity: 0;
    transform: rotateZ(-20deg);
  }
  to {
    opacity: 1;
    transform: rotateZ(0deg);
  }
}
.addressField{font-family: Lato,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:18px;margin-bottom:5px;}
.radioCard{padding: 20px;margin: 6px 0;position:relative;}
.radioCard:hover{background-color:#eee;cursor:pointer;}/* note: the position relative goes with the position absolute on the ::after to get the checkmark in...

JavaScript

jQuery(".selectedAddressButton").hide();

jQuery(function () {
    jQuery(".addressRadio").change(function() {
        if (jQuery(this).is(":checked")) {
            jQuery(this).siblings().find(".selectedAddressButton").show();
            jQuery(this).siblings().find(".deliverButton").hide();
        } else {
            jQuery(this).siblings().find(".selectedAddressButton").hide();
            jQuery(this).parents().find(".deliverButton").show();
        }
    });
});