Demo of Tabs heightStyle setting and getting by radio button


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.
We can change heightstyle option by radio buttons

Content : each panel will take the height based on their content.
Fill: each panel will take the full height of tabs parent element ( here div with height=400px)
Auto : each panel will take the height of tallest panel Maximum.

The tab is inside a parent div with class=my_container with hight=400px. When we select fill value for the radio button the height for all tabs became equal to 400px ( parent element height )

CSS

<style>
.my_container {
height: 400px; // Change this value
}
</style>

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>

jquery

<script>
$(document).ready(function() {	
/////////
$( "#my_tabs" ).tabs({
});
/////////////
$("input:radio[name=r1]").click(function() {
var sel = $(this).val()
$( "#my_tabs" ).tabs( "option", "heightstyle", sel );
$('#d1').html( "  heightstyle Option value = <code>" + sel + "</code>" );
})
////////
var status = $( "#my_tabs" ).tabs( "option", "heightstyle" );
$('#d1').html( "  heightstyle Option value = <code>" + status + "</code>" );
///////
})
</script>