How do you get jQuery tab labels to swap when active and reset?

I am admittedly just learning jQuery. I attempted to search for this but after exhausting my possible avenues of research, I fear I am making my problems worse.

Simply I am attempting to use jQuery for tabs. I would like to change the text label for each tab when it is selected. And back to its original form when collapsed or another tab is selected.

I have been able to change the label to a new id, as seen on the JSFiddle But it actually changes the label to the actual id name.

<div id="tabs">
<ul>
    <li><a href="#tab1" id="tab1-label-link">
        <span id="tab1-label">Label 1</span></a>
        <span id="close-tab1-label" class="no-display">Tab Close</span>
    </li>
    <li><a href="#tab2" id="tab2-label-link">
        <span id="tab2-label">Label 2</span></a>
        <span id="close-tab2-label" class="no-display">Tab Close</span>
    </li>
    <li><a href="#tab3" id="tab3-label-link">
        <span id="tab3-label">Label 3</span></a>
        <span id="close-tab3-label" class="no-display">Tab Close</span>
    </li>
</ul>
<div id="tab1" class="tab-content">Information 1</div>
<div id="tab2" class="tab-content">Information 2</div>
<div id="tab3" class="tab-content">Information 3</div>

With this being my current jQuery.

$(document).ready(function () {
    $(function () {
        $("#tabs").tabs({
            option: "selected",
            heightStyle: "content",
            collapsible: true,
            active: 'none',
            fx: {
                height: 'toggle',
                duration: 500
            },
            select: function (e, ui) {
                $(ui.tab).html("#close-" + event.target.id);
            }
        });
    });
});

All help is so very much appreciated. I have a feeling I should be using classes much more than I am, which may be just one my issues. I have tried so many different ways to get the labels to swap but this stands as the closest I feel I have come to what I am aiming for. Once again thank you for any help.

.no-display { display: none; }

Solution

I think you're slightly missing what the $(ui.tab).html("#close-" + event.target.id); code is doing. That is telling jQuery, "make the contents of ui.tab be the string "#close-" + event.target.id

To make life as simple as possible, I would suggest moving your 'close' spans inside the the tab links, like the following:

<div id="tabs">
    <ul>
        <li><a href="#tab1" id="tab1-label-link">
            <span id="tab1-label">Label 1</span>
            <span id="close-tab1-label" class="no-display">Tab Close</span></a>
        </li>
        <li><a href="#tab2" id="tab2-label-link">
            <span id="tab2-label">Label 2</span>
            <span id="close-tab2-label" class="no-display">Tab Close</span></a>
        </li>
        <li><a href="#tab3" id="tab3-label-link">
            <span id="tab3-label">Label 3</span>
            <span id="close-tab3-label" class="no-display">Tab Close</span></a>
        </li>
    </ul>
    <div id="tab1" class="tab-content">Information 1</div>
    <div id="tab2" class="tab-content">Information 2</div>
    <div id="tab3" class="tab-content">Information 3</div>
</div>

Then, swap your select function for a beforeActivate function, like so:

beforeActivate: function(e, ui) {
    var tab = $(ui.newTab),
        oldTab = $(ui.oldTab);
    tab.find('span').toggleClass('no-display');
    oldTab.find('span').toggleClass('no-display');
}

That should achieve the desired result.