Accessible jQuery toggles odd behaviour
<p>I'm setting up a reusable jQuery toggle function (for my employer) to enable show/hide of content (eg FAQs), to improve accessibility over existing inline onClick bindings. </p>

<p>In JSFiddle everything is fast and fluid, but when I transfer to the preview server an odd behaviour becomes apparent. Clicking the button works as normal, but on clicking the button's link text there's a noticeable delay before anything happens.</p>

<p>Is there anything within the script that might be causing the delay? Or anything which is an obvious candidate for conflicts of some kind?</p>

<p>Anyway, here's the code (based on <a href="http://www.mikeraynham.co.uk/articles/accessible-jquery-toggles" rel="nofollow">Mike Raynham's accessible toggles</a>):</p>

<p><a href="http://jsfiddle.net/internet_man/9yKKM/2/" rel="nofollow">http://jsfiddle.net/internet_man/9yKKM/2/</a></p>

<p>html:</p>

<pre><code>&lt;div class="buttons"&gt; 
    &lt;ul&gt; 
        &lt;li&gt;&lt;strong class="_toggle type noscript"&gt;This is the first toggle&lt;/strong&gt; 
            &lt;ul class="_toggle-this show-hide"&gt; 
                &lt;li&gt;&lt;a href="#"&gt;&lt;strong&gt;Option One&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt; 
                &lt;li&gt;&lt;a href="#"&gt;&lt;strong&gt;Option Two&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt; 
                &lt;li&gt;&lt;a href="#"&gt;&lt;strong&gt;Option Three&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt; 
            &lt;/ul&gt; 
        &lt;/li&gt; 
        &lt;li class="bad-break"&gt;&lt;strong class="_toggle type noscript"&gt;This is the second toggle (a bit longer than the first)&lt;/strong&gt; 
            &lt;ul class="_toggle-this show-hide"&gt; 
                &lt;li&gt;&lt;a href="#"&gt;&lt;strong&gt;Option One&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt; 
                &lt;li&gt;&lt;a href="#"&gt;&lt;strong&gt;Option Two&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt; 
            &lt;/ul&gt; 
        &lt;/li&gt; 
        &lt;li class="bad-break"&gt;&lt;strong class="_toggle type noscript"&gt;This is the third toggle (also somewhat longer)&lt;/strong&gt; 
            &lt;ul class="_toggle-this show-hide"&gt; 
                &lt;li&gt;&lt;a href="#"&gt;&lt;strong&gt;Option One&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt; 
                &lt;li&gt;&lt;a href="#"&gt;&lt;strong&gt;Option Two&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt; 
            &lt;/ul&gt; 
        &lt;/li&gt; 
    &lt;/ul&gt; 
&lt;/div&gt;
</code></pre>

<p>Script:</p>

<pre><code>var create_name = function(text) {
    var name = text.toLowerCase();
    name = name.replace(/^\s+|\s+jQuery|[^a-z0-9&amp;\s-]/g, ''); 
    name = name.replace(/&amp;/g, 'and'); 
    name = name.replace(/\s/g, '-'); 
    name = name.replace(/(-)+\1/g, "jQuery1"); 
    return name; 
}; 

var add_link = function() {
    var name = create_name(jQuery(this).text()); 
    jQuery(this).next('.toggle-this').attr('name', name); 
    jQuery(this).html('&lt;a href="#' + name + '" title="Show content"&gt;' + jQuery(this).html() + '&lt;/a&gt;'); 
}; 
var toggle = function(event) { 
    event.preventDefault(); 
    jQuery(this).toggleClass('expanded').nextAll('.toggle-this').slideToggle(100);
    jQuery('.toggle-this').not(jQuery(this).siblings()).slideUp(100);
    jQuery('.toggle').not(jQuery(this)).removeClass('expanded'); 
}; 

var remove_focus = function() { 
    jQuery(this).blur(); 
}; 

jQuery(function (){ 
    jQuery('._toggle').removeClass('_toggle, noscript').addClass('toggle'); 
    jQuery('._toggle-this').removeClass('_toggle-this').addClass('toggle-this');
    jQuery('._expanded').removeClass('_expanded').addClass('expanded'); 
    jQuery('.toggle:not(.expanded)').nextAll('.toggle-this').hide(); 
    jQuery('.toggle').each(add_link); 
    jQuery('.toggle').click(toggle); 
    jQuery('.toggle a').mouseup(remove_focus); 
});
</code></pre>

<p>CSS:</p>

<pre><code>body
{
    font-size:62.5%;
    color:#666;
    font-family:arial,Helvetica,sans-serif;
}

a
{
    color:#462170;
}

ul
{
    list-style-type:none;
    margin-left:0;
    padding-left:0;
}

strong
{
    font-weight:normal;
}

div.buttons
{
    width:462px;
    line-height:2.2em;
    margin:1.5em 0;
}

.buttons li &gt; strong
{
    font-size:1.9em;
}

.toggle, .buttons .type.noscript
{
    display:block;
    font-size:1.9em;
    height:65px;
    background:url(http://oi48.tinypic.com/dy6xf.jpg) 0 -85px no-repeat;
    padding:20px 0 0 90px;
    text-decoration:none;
    color:#462170;
    cursor:pointer;
    cursor:hand;
}

.toggle a
{
    text-decoration:none;
}

.toggle strong
{
    display:block;
    height:65px;
    border:1px dotted red;
}

.toggle:hover, .toggle:focus
{
    background-position:0 0;
}

.buttons .show-hide 
{
    border-bottom:6px solid white;
}

.buttons .show-hide li      
{
    margin-left:12px;
    border-bottom: 2px solid white;
    border-top:2px solid white;
    font-size:1em;
}

.buttons .show-hide a       
{
    display:block;
    height:15px;
    text-decoration:none;
    color:#462170;
    background:#f1f1f1 url(http://oi46.tinypic.com/6iedtw.jpg) 5px 14px no-repeat;
    padding:12px 0 15px 58px;
}

.buttons .show-hide a:hover, .connection-buttons .show-hide a:focus 
{
    text-decoration:underline;
    color:black;
    background-color:#ece8f0;
    background-position:5px -41px;
}

li.bad-break a
{
    padding-right:30%;
}
</code></pre>

<p>Notes:</p>

<p>Scripts on -- ._toggle becomes .toggle, ._toggle-this becomes .toggle-this, .noscript is removed and a link is inserted around (in this case) the strong element of class toggle, pointing to the next '.toggle-this' element.</p>

<p>Scripts off -- No toggle created but it's styled as though the accordions are expanded.</p>
