Instead of using images for icons we should have alternative option of html symbols

I don't know what you're referring to, the tabs widget doesn't have close buttons and I have no idea what I'm supposed to be looking at on the page you linked to, it doesn't even include jQuery.

Hi,

Sorry for vague explanation. I am just sharing piece of code where I am using close functionality with out using image but that's temporary arrangements. I am concern about loose coupling with images so that if not available we can fulfill requirement with symbols. I dont know if here we can attach images also for better explanation

<code><style>

span.tab-close-class {

position: relative;

top: -7px;

right: -9px;

font-size: 8px;

margin: 0px;

paddin: 0px;

border-bottom: 1px solid black;

}

span.tab-close-class:hover {

position: relative;

top: -7px;

right: -9px;

font-size: 10px;

font-weight: bold;

margin: 0px;

paddin: 0px;

color: red;

curser: hand;

border-bottom: 1px solid black;

}

</style>

<script>

$(document).ready(function() {

$( "#tabsCoachType, #coachesTab").tabs({collapsible: true});

$( "#coachesTab" ).bind( "tabsselect", function(event, ui) {

var closeOption = $('.tab-close-class:hover').length;

alert(closeOption);

var coachesObjArray = $("#coachesTab li");

if(closeOption==1) {

var totalLayer = $("#coachPrint p");

var a = $(totalLayer[ui.index-1]).html()[1];

a = parseInt(a);

a = a--;

$(totalLayer[ui.index-1]).remove();

alert($($logFact).html());

$(coachesObjArray[ui.index]).hide("2000");

}

});

</script>

<div id="coachesTab">

<ul>

<li><a href="#loco-desc" ><span>Loco</span>'''<span class='tab-close-class'>X</span></p>'''</a></li>

<li style="display: none;"><a href="#loco-desc" ><span></span></a></li>

<li style="display: none;"><a href="#loco-desc" ><span></span></a></li>

<li style="display: none;"><a href="#loco-desc" ><span></span></a></li>

</ul>

</div>