I have this code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="radio">
<label>
<input type="radio" name="optionsPago" value="1" role="button" data-toggle="collapse" href="#collapseTarjeta" aria-expanded="false" aria-controls="collapseTarjeta">
Tarjeta Crédito/Débito
</label>
</div>
<div class="collapse" id="collapseTarjeta">
<div class="well">
<div class="row">
<div class="col-md-4 form-group campo-obligatorio">
<label>Número de Tarjeta</label>
<div id="numero-tarjeta" class="form-control"></div>
</div>
<div class="col-md-2 form-group campo-obligatorio">
<label>CVC</label>
<div id="cvc-tarjeta" class="form-control"></div>
</div>
<div class="col-md-2 form-group campo-obligatorio">
<label>Expiración</label>
<div id="expiracion-tarjeta" class="form-control"></div>
</div>
</div>
<input type="hidden" id="token">
</div>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsPago" value="2">
Oxxo Pay
</label>
</div>
What I want to do is that when the first one is selected radio
, the fields are displayed: Card Number, CVC and Expiration. The problem is that that radius is not selected for me, if it displays the fields but does not leave theradio
You have to change the
href
todata-target
like this: