JQuery Slider; How to change button name? (Eg; 'Open', 'Close')
<p><strong>Live View:</strong> <a href="https://tornhq.com/WorkingOn/InteractiveMap/Replaced-With-Divs.html" rel="nofollow">https://tornhq.com/WorkingOn/InteractiveMap/Replaced-With-Divs.html</a></p>

<hr>

<p><strong>JQuery Code to Slide &amp; Tab Switcher</strong></p>

<pre><code>$(function () {
    $("#tab-3").toggle(function () {
        $('#Map-Selection-Info').animate({marginLeft: '978px'}, 1000);
        $('#ATWI80C-Map').animate({width: '900px' }, 1000);
    }, function () {
        $('#Map-Selection-Info').animate({marginLeft:'670px'}, 1000);
        $('#ATWI80C-Map').animate({width: '600px' }, 1000);
    });
    $('#tab-content div').hide();
    $('#tab-content div.tab-content').last().fadeIn().find('*').show();

    $('#Info-Side-Tabs li').click(function() {
        $('#Info-Side-Tabs li').removeClass("current");
        $(this).addClass("current");
        $('#tab-content div').hide();
        var href = $(this).find('a').attr("href");
        $('#tab-content div' + href).fadeIn().find('*').show();
    });
});
</code></pre>

<hr>

<p><strong>Li of the Show/Hide</strong></p>

<pre><code>&lt;li rel="redeye16.png" id="tab-3"&gt; &lt;a href="#"&gt;Hide This&lt;/a&gt; &lt;/li&gt;
</code></pre>

<hr>

<p>I would like that when you click to hide the side container, the image rel changes to another image (none of the iamge have been made yet) and for the name of 'Hide This' to become 'Show This'. I would also like the JQuery Tab Switcher I have to not show an empty contain, instead to do the same as what it does, changing the class to current, however keeping the content of the tab you were on, and then if you decide to reopen the current switches back.</p>

<p>Thank you for any time spend in answering my questions.</p>

<p>Best Regards,</p>

<p>Tim</p>

<p><strong>Edit:</strong></p>

<pre><code>$(function () {
    $("#tab-3").toggle(function () {
        $('#Map-Selection-Info').animate({marginLeft: '978px'}, 1000);
        $('#ATWI80C-Map').animate({width: '900px' }, 1000);
        $(this).find('a').text('Open Me');
        // Problem is Below
        $(this).css("background-image","url(http://www.theaa.com/images/insurance/tick-trans.gif) no-repet");
    }, function () {
        $('#Map-Selection-Info').animate({marginLeft:'670px'}, 1000);
        $('#ATWI80C-Map').animate({width: '600px' }, 1000);
        $(this).find('a').text('Close Me');
        // Problem is Below
        $(this).css("background-image","url(http://www.ecvet-projects.eu/Admin/images/icons/Red_X.gif) no-repet");
    });
    $('#tab-content div').hide();
    $('#tab-content div.tab-content').last().fadeIn().find('*').show();

    $('#Info-Side-Tabs li').click(function() {
        $('#Info-Side-Tabs li').removeClass("current");
        $(this).addClass("current");
        $('#tab-content div').hide();
        var href = $(this).find('a').attr("href");
        $('#tab-content div' + href).fadeIn().find('*').show();
    });
});
</code></pre>

<p><strong>Edit:</strong></p>

<p><strong>The Li CSS:</strong></p>

<pre><code>.tab-list li a {
    display: block;
    float: left;
    line-height: 25px;
    padding-left: 30px;
    font-family: sans-serif;
    font-size: 13px;
    background-image: url(http://www.ecvet-projects.eu/Admin/images/icons/Red_X.gif);
    background-repeat: no-repeat;
    background-position: 12px center;
    color: #444;
    text-decoration: none;
}
</code></pre>
