Demo of Tabs collapsible option to close all

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 collapse and open all tabs if the collapsible option is set to True.
Try closing the tab by setting the collapsible option to false.


<div id="my_tabs">
<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>
<div id='php'>PHP is a server side scripting language ...........

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

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



$(document).ready(function() {	
$( "#my_tabs" ).tabs({
collapsible: true,
//active: false	
var str=$(this).attr("value");
if(str=='Close All'){
$("#b1").prop('value', 'Open All');
$("#b1").html('Open All');
$( "#my_tabs" ).tabs( "option", "active", false );
$("#b1").prop('value', 'Close All');
$("#b1").html('Close All');	
$( "#my_tabs" ).tabs( "option", "active", true );
$("input:radio[name=r1]").click(function() {
var sel = ($(this).val() == 'true');
$( "#my_tabs" ).tabs( "option", "collapsible", sel );
$('#d1').html( "  Collapsible Option value = <code>" + sel + "</code>" );
var status = $( "#my_tabs" ).tabs( "option", "collapsible" );
$('#d1').html( "  Collapsible Option value = <code>" + status + "</code>" );