Demo of Accordion changing active header by selection, using JQuery UI

Header 1 ( panel No. 0 )

Text about Header 1

Header 2 ( panel No. 1 )

Text about Header 2

Header 3 ( panel No. 2 )

Text header 3

Header 4 ( panel No. 3 )

Text about Header 4.


Tutorial on Accordion DEMO of transition speed or Animate of Panels 
<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>