Demo of Setting and getting active Tab in JQuery UI

PHP is a server side scripting language used for managing backed functionality of the web site. PHP code is used to interact with database and manage the programing part of the website. Our browsers does not understand or supports PHP scripts. When user ( browser ) request for a PHP page the server interpret php files and returns the output in the form of HTML.
This is the set of tags which is understood by web browser. By HTML we can control the look and feel of the website. Browser interprets the HTML tags and accordingly display the page. For example to write a part of text using underline we have to use tags and mark the starting and ending of the underlined text.
This is mainly used for managing client side scripting requirement. Our browsers support JavaScript and they execute this code once the page is loaded at client side. Server sends the code along with HTML tags to the web browser for execution at client end.

This is a database which stores records. Server side scripting languages interact with database and manage the data. We can add, update or delete records based on the requirement by using server side scripting language. Structured Query Language (SQL ) is the common language used to interact with the database.


Tutorial on Tabs Demo of collapse all tabs

HTML

<div id="my_tabs">
<ul>
<li><a href="#php">PHP</a></li>
<li><a href="#html">HTML</a></li>
<li><a href="#js">JavaScript</a></li>
<li><a href="#mysql">MySQL</a></li>
</ul>
<div id='php'>PHP is a server side scripting language ...........
</div>

<div id='html'>This is the set of tags which is understood by web browser...... 
</div>

<div id='mysql'>This is a database which stores records..... 
</div>

</div>

<br>
<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>

jquery

<script>
$(document).ready(function() {
////////////////
$( "#my_tabs" ).tabs({
	heightStyle: "auto"
})
///Reding the default option active///////////
var p_active = $( "#my_tabs" ).tabs( "option", "active" );
$("#d1").html('Tab Selected : ' +p_active);
/////
$("input:radio[name=r1]").click(function() {
var sel = Number($("input[name=r1]:checked").val())
$( "#my_tabs" ).tabs( "option", "active", sel );
///Reading the option active//////
var p_active = $( "#my_tabs" ).tabs( "option", "active" );
$("#d1").html('Tab Selected : ' +p_active);
 });
/////////
})
</script>