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/']
`toggle()` is pretty buggy at times, i've had it do odd things to checkmarks (unchecking them) and other assorted issues. i'd suggest just handling it using a click event, much less minor annoyances. and this way, you don't have to worry about what state `#lowerDiv` is in in the first place:

```
$('#upperDiv').click(function() {
    $('#lowerDiv').animate({
        'opacity' : 'toggle',
    });
});

```
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.