jquery show hide multiple divs on click - want hide the trigger clicked link after click

Question

I'm using this code to show/hide multiple divs: FIDDLE

HTML

<ul class="fade_text">
    <li><a href="#" onClick="showdiv('astro-1'); return false;" class="toggle"><h4>Was ist ein Teleskop?</h4></a>

        <div id="astro-1" class="showHideDiv">
            Some Content
        </div>
    </li>
    <li><a href="#" onClick="showdiv('astro-2'); return false;" class="toggle"><h4>Lichtsammelvermögen</h4></a>

        <div id="astro-2" class="showHideDiv">
            Some Content
        </div>
    </li>
    <li><a href="#" onClick="showdiv('astro-3'); return false;" class="toggle"><h4>Grenzgröße (der schwächsten erkennbaren Sterne)</h4></a>

        <div id="astro-3" class="showHideDiv">
            Some Content
        </div>
    </li>
    <li><a href="#" onClick="showdiv('astro-4'); return false;" class="toggle"><h4>Auflösung(svermögen)</h4></a>

        <div id="astro-4" class="showHideDiv">
            Some Content
        </div>
    </li>
    <li><a href="#" onClick="showdiv('astro-5'); return false;" class="toggle"><h4>Vergrößerung</h4></a>

        <div id="astro-5" class="showHideDiv">
           Some Content
        </div>
    </li>
</ul>

JS

$(document).ready(function () {
    function showHideDivs() {
        $('.showHideDiv').each(function () {
            if ($(this).prevAll('a.toggle:first').hasClass('expanded')) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    }

    $('a.toggle').click(function () {
        var addExpanded = !$(this).hasClass('expanded');
        $('a.toggle').removeClass('expanded');
        if (addExpanded) {
            $(this).addClass('expanded');
        }
        showHideDivs();
    });

    showHideDivs();
});

Everything is working fine.
My question: I want to hide the link fe "Lichtsammelvermögen" after the link is clicked and the text container is shown.

How can I do that?

Answer 1

http://jsfiddle.net/7pXpK/10/

Write $(this).hide() when addExpanded is false.

    $('a.toggle').click(function () {
        var addExpanded = !$(this).hasClass('expanded');

        if (addExpanded) {
            $(this).addClass('expanded');
        } else {
            $('a.toggle').removeClass('expanded');
            $(this).hide();
        }
        showHideDivs();
    });

Answer 2

you can add a hide() call

    $(this).hide();

if you want to re-show it when clicking another header you can do this too:

    $('a').show();
    $(this).hide();

example: http://jsfiddle.net/7pXpK/11/