JQuery | Add anchor and add / remove class on click
<p>Here is my jquery: </p>

<pre><code>// Show all instances
    var link = $('&lt;a class="show-instances" href="#"&gt;Show all instances&lt;/a&gt;');

    $('tr.main').hide().first().find('.product').parent().remove('a').append(link);
    $('tr.main').first().show();

    $(function () {
        $(".show-instances").click(function (e) {
            e.preventDefault();
            $(".show-instances").addClass('selected').not(this).removeClass('selected');
            var selectedClass = $(this).closest('tr.main').attr('class').split(' ');
            $('.' + selectedClass[1]).not(':has("a.show-instances")').toggle();
            return false;
        })
    });
</code></pre>

<p>Adding the anchor works and on click adding the class works - I just don't understand why on click the class added "selected" won't remove when a user clicks the anchor the 2nd time? </p>

<p>So when a user clicks the anchor "show-instances" class "selected" will add to the anchor - I need the class to be removed when it's clicked again. </p>

<p>Am I missing another function? </p>

<p>Any suggestions? </p>

<p>/<strong><em>*</em>**<em>*</em>**</strong><em>RESOLVED</em><strong><em>*</em>**<em>*</em>**<em>*</em></strong>/</p>

<p>Using the Toggle class - here is the jquery:</p>

<pre><code>// Show all instances
    var link = $('&lt;a class="show-instances" href="#"&gt;Show all instances&lt;/a&gt;');

    $('tr.main').hide().first().find('.product').parent().remove('a').append(link);
    $('tr.main').first().show();

    $(function () {
        $(".show-instances").click(function (e) {
            e.preventDefault();
            $(this).toggleClass("selected");
            var selectedClass = $(this).closest('tr.main').attr('class').split(' ');
            $('.' + selectedClass[1]).not(':has("a.show-instances")').toggle();
            return false;
        })
    });
</code></pre>

<p>Also here is a <a href="http://jsfiddle.net/MV4uM/" rel="nofollow">Jsfiddle</a> link to see</p>
