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="radio col-xs-12">
                <label>
                  <input type="radio" name="radios" class="track-order-change" id="firstRadio" value="">
                  First Radio
                </label>
              </div>

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

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

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

              <div class="radio col-xs-12">
                <label>
                  <input type="radio" name="radios" class="track-order-change" id="thirdRadio">
                  Third Radio with no Accordion
                </label>
              </div>

JavaScript

$('#firstAccordion, #secondAccordion').collapse('hide');	
$('input[name="radios"]').change( function() {
		
		if ($('#firstRadio').is(":checked")){

			$('#firstAccordion').collapse('show');
		
		} else {
			
			$('#firstAccordion').collapse('hide');
		}
        
		if ($('#secondRadio').is(":checked")){

			$('#secondAccordion').collapse('show');
		
		} else {
			
			$('#firstAccordion').collapse('hide');
		}
        
        if ($('#thirdRadio').is(":checked")){

			$('#firstAccordion').collapse('hide');
            $('#secondAccordion').collapse('hide');
		}

  });