<html>
<head>
<title></title>
</head>
<div id='accordion' class='accordion'>
<h3>Header 1 ( panel No. 0 )</h3>
<div>
Text about Header 1
</div>
<h3>Header 2 ( panel No. 1 )</h3>
<div>
Text about Header 2
</div>
<h3>Header 3 ( panel No. 2 )</h3>
<div>
Text header 3
</div>
<h3>Header 4 ( panel No. 3 )</h3>
<div>
Text about Header 4.
</div>
</div>
<br><br>
<div class='col-md-12 col-md-offset-1'>
<div class='row'> <div class='col-md-6'>
<div class='radio-inline'>
<label><input type='radio' name='r1' id='r1' value='0' checked>Panel 0 </label>
</div>
<div class='radio-inline'>
<label><input type='radio' name='r1' id='r2' value='1' >Panel 1</label>
</div>
<div class='radio-inline'>
<label><input type='radio' name='r1' id='r3' value='2' >Panel 2</label>
</div>
<div class='radio-inline'>
<label><input type='radio' name='r1' id='r4' value='3' >Panel 3</label>
</div>
</div> <div class='col-md-6'> <div id=d1></div> </div>
</div></div>
<script src='https://code.jquery.com/jquery-3.1.1.min.js'></script>
<script src='https://code.jquery.com/ui/1.12.1/jquery-ui.min.js'></script>
<link href='https://code.jquery.com/ui/1.12.1/themes/cupertino/jquery-ui.css' rel='stylesheet'>
<script>
$(document).ready(function(){
//////////////////////////
$( '#accordion' ).accordion();
////////////////
$("input:radio[name=r1]").click(function() {
var sel = Number($("input[name=r1]:checked").val())
$("#d1").html('Panel Selected : ' +sel);
$( ".accordion" ).accordion( "option", "active", sel );
});
/////////
var p_active = $( ".accordion" ).accordion( "option", "active" );
$("#d1").html('Panel Selected : ' +p_active);
/////////
})
</script>
</body>
</html>