JS: Clickable Toggle Switches that Change Their Own Text

1

I have the Toggle Switches (Yellow) on the right side of my Site Map here. When they are clicked they either hide or show the Children (Green) below the Parent (Blue). I wanted them to behave like the ‘+’ and ‘-’ that you see in Windows folders shown in hierarchal mode.

This is what I want to exactly happen.

If the Children (Green) are ‘display: none’, then onclick of Toggle (Yellow), Children (Green) appear with ‘display:block’, but also the ‘+’ text of Toggle (Yellow) turns into ‘-’, which as you see doesn’t.
[CENTER]
[/CENTER]

If the Children (Green) are ‘display: block’, then onclick of Toggle (Yellow), Children (Green) disappear with ‘display: none’, and ‘-’ text of Toggle (Yellow) returns to ‘+’.

But I don’t know how to reference these elements in their particular page structure. I have tried breaking down sample Javascript of onclick items and managed to get the Children (Green) to appear and disappear, but I can’t get the Toggle (Yellow) text to change because I don’t know how to call them and their attribute to the function.

http://www.wku.edu/~markanthony.echipare/5.0/Site_Map_Test.php

Here is the JS that I have now to get the Children to work:

<script type="text/javascript">
function toggleSub(submenu) {
    if (document.getElementById(submenu).style.display == 'none') {
        document.getElementById(submenu).style.display = 'block'
/* ----Here should be something that changes Toggles text to '-' ----*/
    } else {document.getElementById(submenu).style.display = 'none'
/* ----Here should be something that changes Toggles text back to '+' ----*/}
}
</script>

This is what it modifies:

<body>

<div id="global">

    <div id="content">
        <div id="left_side" style="margin: 0;">
                <ul>                    
                    <li id="SM_Parent">
                        <a class="text" href="_index.php">
                        Home
                        </a>
                        <a class="toggle" href="#" onclick="toggleSub('Home_List'); toggleChar('toggle'); return false">+</a>

                        <ul id="Home_List">
                            <li id="SM_Child">
                                <a href="Index.Welcome.php">
                                Welcome
                                </a>
                            </li>
                            <li id="SM_Child">
                                <a href="#">
                                WHY Recycle?
                                </a>
                            </li>
                            <li id="SM_Child">
                                <a href="#">
                                Recycle It
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li id="SM_Parent">
                        <a class="text" href="#">
                        Do's and Don'ts
                        </a>
                        <a class="toggle" href="#" onclick="toggleSub('Do_List'); toggleChar('toggle'); return false">+</a>

                        <ul id="Do_List">
                            <li id="SM_Child">
                                <a href="#">
                                Intro
                                </a>
                            </li>
                            <li id="SM_Child">
                                <a href="#">
                                Recycling Policies
                                </a>
                            </li>

..........

        

        </div>
    </div>

    <div id="clear_floats"></div>

</div>


</body>

I need to change the text in <a class=“toggle”></a> accordingly with the state of the Children (Green) being displayed.

I have fooled around with it already, but JS syntax and semantics I am totally not familiar with.

Thanks in advance.