Multiple choosing

Question

I want to make a selection.

1. If I press List1 it shows all with class Link1, others hide.
2. Then I press List2 it shows all with class Link2, and show hidden links on 1st step.
3. I press List3 it shows all with class Link3, and show hidden links on 1st and 2nd steps. +I tried to use $.toggle() to make a 'undo' click, but it works not how I expect.

Here is my example:

HTML:

<table class="tg">
<tr>
    <td class="structure-left-side structure-left-side-idea">
        <h4>List1</h4>
    </td>
    <td class="structure-serviceinnova-links" rowspan="3">
        <p><a class="Link2" href="">Link2</a></p>
        <p><a class="Link1 Link2 Link3" href="">Link1 Link2 Link3</a></p>
        <p><a class="Link1" href="">Link1</a></p>
        <p><a class="Link1 Link3" href="">Link1 Link3</a></p>
        <p><a class="Link1 Link2" href="">Link1 Link2</a></p>
        <p><a class="Link3 Link2" href="">Link3 Link2</a></p>
        <p><a class="Link3" href="">Link3</a></p>
    </td>
    <td class="structure-project-links" rowspan="3">
    </td>
</tr>
<tr>
    <td class="structure-left-side structure-left-side-patent">
        <h4>List2</h4>
    </td>
</tr>
<tr>
    <td class="structure-left-side structure-left-side-startup">
        <h4>List3</h4>
    </td>
</tr>
</table>

JavaScript:

$('.structure-left-side-idea>h4').on('click', function () {
    $(this).removeClass('hidden-link');
    var self = this;
    $('.structure-serviceinnova-links > p > a , .structure-project-links > p > a').each(function () {
        if (!$(this).hasClass('Link1')) {
            $(this).addClass('hidden-link');
            if ($(this).is(':hidden')) {
                $(this).removeClass('hidden-link');
            }
        }
    });
});
$('.structure-left-side-patent>h4').on('click', function () {
    $(this).removeClass('hidden-link');
    var self = this;
    $('.structure-serviceinnova-links > p > a , .structure-project-links > p > a').each(function () {
        console.log(this);
        if (!$(this).hasClass('Link2')) {
            $(this).addClass('hidden-link');
            if ($(this).is(':hidden')) {
                $(this).removeClass('hidden-link');
            }
        }
    });
});
$('.structure-left-side-startup>h4').on('click', function () {
    $(this).removeClass('hidden-link');
    var self = this;
    $('.structure-serviceinnova-links > p > a , .structure-project-links > p > a').each(function () {
        console.log(this);
        if (!$(this).hasClass('Link3')) {
            $(this).addClass('hidden-link');
            if ($(this).is(':hidden')) {
                $(this).removeClass('hidden-link');
            }
        }
    });
});

http://jsfiddle.net/mw008znx/11/

I'm really wish someone can help me and explain or give some ideas.

Answer 1

I'm not sure if I got the behavior right take a look: FIDDLE

RELEVANT CODE

$('.structure-serviceinnova-links > p > a , .structure-project-links > p > a').each(function () {
        if (!$(this).hasClass('Link1')) {
            $(this).addClass('hidden-link');
            if ($('.Link1:hidden')) {
                $('.Link1').removeClass('hidden-link');
            }