JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="accordion-container"> 
    <div class="accordion-element col-xs-12">
        <label>
            <input type="radio" name="radios" class="track-order-change" value="" />
            First Radio
        </label>

        <div class="col-xs-12 panel-collapse collapse">
            First Accordion
        </div>
    </div>

    <div class="accordion-element col-xs-12">
        <label>
            <input type="radio" name="radios" class="track-order-change" value="" />
            Second Radio
        </label>

        <div class="col-xs-12 panel-collapse collapse">
            Second Accordion
        </div>
    </div>
</div>

JavaScript

$('.accordion-container \
  .accordion-element \
  input[name="radios"]').on('change', function(event) {
    var panel;
    
    panel = $(this).parents('.accordion-element').find('.panel-collapse');
    
    $('.accordion-container .accordion-element .panel-collapse').slideUp();
    panel.slideDown();
});