<?php

	$toto = 5;
?>

<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>


<style type="text/css">
 .ui-icon-circle-close {
    cursor:pointer;
  }
</style>
  
<script>
 $(function() {
    $( "#tabs" ).tabs();
    $(".ui-closable-tab").live( "click", function() {
        var tabContainerDiv=$(this).closest(".ui-tabs").attr("id");
        var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
        $( "#" + panelId ).remove();
        $("#"+tabContainerDiv).tabs("refresh");
        var tabCount=$("#"+tabContainerDiv).find(".ui-closable-tab").length;
        if (tabCount<1) {
            $("#"+tabContainerDiv).hide();
        }
    });
  });
</script>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a><span class='ui-icon ui-icon-circle-close ui-closable-tab'></span></li>
    <li><a href="#tabs-2">Proin dolor</a><span class='ui-icon ui-icon-circle-close ui-closable-tab'></span></li>
    <li><a href="#tabs-3">Aenean lacinia</a><span class='ui-icon ui-icon-circle-close ui-closable-tab'></span></li>
  </ul>
  <div id="tabs-1">
    <p>Tab 1 Content</p>
  </div>
  <div id="tabs-2">
    <p>Tab 2 Content</p>
  </div>
  <div id="tabs-3">
    <p>Tab 3 Content</p>
  </div>
</div>