Why does adding a speed to toggle affect ':visible'?
<p>I am working on some functionality to show a div containing some text when a user clicks on a link.</p>

<p>The link initially displays the text 'show +' and then when the div is revealed this text changes to 'hide -'.  Code is below:</p>

<p><strong>JQUERY</strong></p>

<pre><code>    &lt;script&gt;
    $(document).ready(function() {
    $('p.link + div').hide();
    $('p.link a').prepend('&lt;span&gt;info +&lt;/span&gt; ');

    $('p.link a').click(function(e) {
     var vis = $(this).parent().next().toggle().is(':visible');
     $(this).find('span').text(vis ? 'hide -' : 'info +');
     e.preventDefault();
    });
    });
    &lt;/script&gt;
</code></pre>

<p><strong>HTML</strong></p>

<pre><code>    &lt;p class="link"&gt;&lt;a href="#" class="show-hide"&gt; &lt;/a&gt;&lt;/p&gt;

    &lt;div class="info"&gt;

    &lt;p&gt;Some sample text to show and hide&lt;/p&gt;

    &lt;/div&gt; &lt;!-- info --&gt;
</code></pre>

<p>This is all working fine but then I decided rather then an immediate show / hide, it would be nice to gradually reveal the text by adding a speed to the toggle.  I therefore amended the following line:</p>

<p><strong>JQUERY</strong></p>

<pre><code>    var vis = $(this).parent().next().toggle("slow").is(':visible');
</code></pre>

<p>This gives me the transition effect I want but now the link text is not changing.  It still initially displays as 'info +' but from there on after, regardless of whether or not the div is displayed or not, the link text reads 'hide -'.</p>

<p>I assume this is because somehow the code is always seeing the div as being displayed even when it is not but I am unsure of how to fix this.</p>

<p>Any help would be appreciated.</p>

<p>Thanks</p>
