I realized the solution to this problem while I was creating the documentation to ASK this question...so I am posting the answer if for no other reason than to keep me from wasting time on this in the future
['https://Stackoverflow.com/questions/288319', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/2755/']
If the content to be TOGGLEd is displayed (visible) when the page is rendered the functions would be in the following order, if the content is hidden originally then reverse the functions

```
<html>
<head>
<style>
 #upperDiv {width:200px; height:20px; text-align:center; cursor:pointer; }
 #lowerDiv {width:200px; height:20px; background-color:red; border:#206ba4 1px solid;}
</style>

<script language="Javascript" src="javascript/jquery-1.2.6.min.js"></script>
<script type="text/JavaScript">

$(function(){
$('#upperDiv').toggle (
    function(){ 
        $("#lowerDiv").hide() ; 
        },
    function(){ 
        $("#lowerDiv").show() ; 
        }
); // End toggle
 }); // End eventlistener

</script>
</head>
<body>
<div id="upperDiv" >Upper div</div>
<div id="lowerDiv" >Lover Div</div>
</body>
</html>

```
I know this is a really old question, but just for people that are looking for a quick fix this worked for me:

a. in the PHP/HTML file:

```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/.../jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("#pClick").click(function(){          
            $("#pText").toggle();
            $("#pText").text("...");
        });
    });
    </script>

```

b. in the CSS file:

```
#pText {display: none;}

```

It now works even on the first click. It's a simple, quick answer that I hope will be useful.