jquery - .slideToggle() First Click doesn't work properly

Question

I have a button that is used to expand a hidden div (hidden using display:none;) using jquery's slideToggle() function. The code is as follows:

<button class="mobileonly singlebutton" style="color:#FFFFFF; font-size:20px;" title="Expand Menu" onclick="$('#menuslide').slideToggle('fast');">Quick Links Menu</button>
<br />
<div id="menuslide" class="infodiv mobileonly" style="display:none; list-style:none; font-size:24px;">

The first click doesn't slide the div out, it instead just displays the info. Not only that, but the "infodiv" class style isn't applied. Then when I click it again, it slides out (even though it was already out, it behaves as though it was in) and the "infodiv" class style is applied. So this only happens the first time. Why?

EDIT: I just realized I was running jQuery 1.7.2, so I updated to jQuery 1.9.1 and the behaviour has improved. The first click still doesn't perform as expected, but the second click now brings it back up (recognizing that it was expanded). I'm testing this in mobile Safari on iPhone.

EDIT2: The following is the CSS that is applied to the div

.infodiv
{
background-color:#FFFFFF;
border:1px solid #FFFFFF;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
width:480px;

-webkit-box-shadow: 0px 0px 8px #888888;
-moz-box-shadow: 0px 0px 8px #888888;
box-shadow: 0px 0px 8px #888888;
color:#000000;
padding:3px;
}
.mobileonly
{
display:none;
visibility:hidden;
}
@media only screen /* only for mobile devices apply the following */
and (max-width : 550px)
{
.mobileonly
{
    display:inline;
    visibility:visible;
}

.infodiv
{
    width:400px;
    font-size:14pt;
}
}

The id on the div is only used for the javascript, it does not have any style.

Answer 1

Thanks for sharing the css. It sure is a CSS issue. I see that you have set display:inline; for class .mobileonly . Changing it to display: block; should solve your problem.

Fiddle

Answer 2

A close </div> tag was absent.

<div id="menuslide" class="infodiv mobileonly" style="display:none; list-style:none; font-size:24px;">
</div>