JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class="accordion" id="accordion">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<label class="radio">
<input type="radio" name="address" value="addres_1" id="address_1"/>
Shipping Address 1
</label>
</a>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
Anim pariatur cliche 1...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<label class="radio">
<input type="radio" name="address" value="addres_2" id="address_2"/>
Shipping Address 2
</label>
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Anim pariatur cliche 2...
</div>
</div>
</div>
</div>
JavaScript
$('#accordion').on('shown', function () {
$('#accordion .in').parent().find('input[name=address]').prop('checked',true);
});
var propagated = false;
$('.radio').click(function(e){
if($(this).closest('.accordion-group').find('input[name=address]').is(':checked') && !propagated){
e.stopPropagation();
propagated = true;
}
else if($(this).closest('.accordion-group').find('input[name=address]').is(':checked')){
propagated = false;
e.stopPropagation();
alert('Performing something different');
}
});