using jquery how do you toggle a div & element using the same link?

i have a menu item that displays a DIV when clicked, bu开发者_如何学运维t i also want the li text to change when the link is clicked and for it toggle between clicks. here is the html:

    <div class="menu">
                <ul>
                <li class="l1"><a href="javascript:toggleDiv('upgrade');" id="upgrade_link">upgrade</a></li>
                <li class="l1" style="display:none"><a href="javascript:toggleDiv('upgrade');" id="upgrade_link">Free</a></li>
                <li class="l2"><a href="#">login</a></li>
                <li class="l3"><a href="#">about</a></li>
                </ul>
            </div>

here is the jquery:

$(document).ready(function() {
        $("div.upgrade").hide();
        $("div.signup").show();
    });
    function toggleDiv(divId) {
       $("#"+divId).toggle(function() {
        $('#upgrade_link').click(function () {
            $('.l1').toggle()
        });
    });
    }

just add this?

$('.l1').text('new text')

I guess some things are missing from your example, but you can chain things and select the parent Li to manipulate that one:

$('#upgrade_link').click(function () {
            $(this).css(or whatever).parent("li").css("background", "yellow");
        });