jquery slideToggle menu not working initially

Question

I have created a navigation menu with collapsible secitons using slideToggle.

When you click 'Filter these products' the submenus appear. When you initially click on a submenu it displays a grey area and there is a 1 or 2 second delay before the options are shown. However, if you then click to close the slide menu back up then it slides up with no delay. Click the submenu link again and it slides down with no delay.

The delay only appears to happen when the submenu is first clicked. Any thoughts on what this could be?

Here is my code:

<style>
.refinement-ttl {display:none;}

.lhnav_container {width:100%; overflow:hidden; clear:both; border:1px solid #EBEBEB;}
#refinement-menu {margin:0%; width:100%;}
a.menu-link {height:auto; width:100%; display:block; color:#fff; float:left; padding:12px 0; font-family:arial; font-size:1.8em; text-transform:uppercase; background:#000000;}
.side-menu .refinement-submenu {padding:0px; display:none;}
.side-menu ul {margin:0; padding:0; border:none; overflow:hidden; width:98%; list-style:none;}
.side-menu>ul>li {margin:0 1%;}
.side-menu>ul>li>a {width:98%; padding:10px 0 10px 2%; background:#580f3b; color:#ffffff; text-transform:uppercase; text-decoration:none;}
.side-menu>ul>li>a.active {background:red;}
.side-menu>ul>li>a span {color:#ffffff; font-family:'geometric_medium', arial;}
.side-menu>ul>li>ul {margin:2% 0 0 0;}
.side-menu>ul>li>ul>li {height:50px; float:left; width:33%;}
.side-menu ul.refinement-submenu li label input {margin:2px 0 0 0;}
.side-menu ul.refinement-submenu li label:hover {background:none; color:#000000;}
.side-menu ul.refinement-submenu li label span {text-transform:uppercase; font-size:1.2em; font-family:'PTSansBold', arial;}
.side-menu.active, .side-menu > ul ul.active {max-height:200em;}
.side-menu ul ul, .side-menu ul ul ul {display:inherit; position:relative; left:auto; top:auto; border:none;}
.side-menu, .side-menu > ul ul { overflow: hidden; max-height: 0; background-color: #f4f4f4; }
.side-menu li a { color: #000; display: block; position: relative; }
.refinement-menu-btns {display:none;}  
.refinement-menu-btns input.cancel_refinement {background:#929292; color:#ffffff; margin:0 10px 0 0;}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div class="lft_col_sml">
    <div class="lhnav_container">
        <a class="menu-link" href="">Filter These Products</a>
        <div class="refinement-ttl">Refine by</div>
        <nav id="refinement-menu" class="side-menu subcategory-menu">
            <div class="refinement-menu-btns">
                <input type="button" class="cancel_refinement" value="CLEAR"/>
                <input type="button" class="apply_refinement" value="APPLY &#187;"/>
            </div>
            <ul>
                <li class="has-submenu">
                    <a href="#">
                        <span>Menu Area 1</span>
                    </a>
                    <ul class="refinement-submenu">
                         <li>
                            <label>
                                <input type="checkbox" />
                                <span class="label_ttl">Submenu 1</span>
                            </label>   
                         </li>
                         <li>
                            <label>
                                <input type="checkbox" />
                                <span class="label_ttl">Submenu 2</span>
                            </label>                                            
                         </li>
                         <li>
                            <label>
                                <input type="checkbox" />
                                <span class="label_ttl">Submenu 3</span>
                            </label>                                            
                         </li>
                         <li>
                            <label>
                                <input type="checkbox" />
                                <span class="label_ttl">Submenu 4</span>
                            </label>                                            
                         </li>
                         <li>
                            <label>
                                <input type="checkbox" />
                                <span class="label_ttl">Submenu 5</span>
                            </label>                                            
                         </li>
                    </ul>
                </li>
                <li class="has-submenu">
                    <a href="#">
                        <span>Menu Area 2</span>
                    </a>
                    <ul class="refinement-submenu">
                         <li>
                            <label>
                                <input type="checkbox" />
                                <span class="label_ttl">Submenu 1</span>
                            </label>   
                         </li>
                         <li>
                            <label>
                                <input type="checkbox" />
                                <span class="label_ttl">Submenu 2</span>
                            </label>                                            
                         </li>
                         <li>
                            <label>
                                <input type="checkbox" />
                                <span class="label_ttl">Submenu 3</span>
                            </label>                                            
                         </li>
                         <li>
                            <label>
                                <input type="checkbox" />
                                <span class="label_ttl">Submenu 4</span>
                            </label>                                            
                         </li>
                         <li>
                            <label>
                                <input type="checkbox" />
                                <span class="label_ttl">Submenu 5</span>
                            </label>                                            
                         </li>
                    </ul>
                </li>
                <li class="has-submenu">
                    <a href="#">
                        <span>Menu Area 3</span>
                    </a>
                    <ul class="refinement-submenu">
                         <li>
                            <label>
                                <input type="checkbox" />
                                <span class="label_ttl">Submenu 1</span>
                            </label>   
                         </li>
                         <li>
                            <label>
                                <input type="checkbox" />
                                <span class="label_ttl">Submenu 2</span>
                            </label>                                            
                         </li>
                         <li>
                            <label>
                                <input type="checkbox" />
                                <span class="label_ttl">Submenu 3</span>
                            </label>                                            
                         </li>
                         <li>
                            <label>
                                <input type="checkbox" />
                                <span class="label_ttl">Submenu 4</span>
                            </label>                                            
                         </li>
                         <li>
                            <label>
                                <input type="checkbox" />
                                <span class="label_ttl">Submenu 5</span>
                            </label>                                            
                         </li>
                    </ul>
                </li>
                <li class="has-submenu">
                    <a href="#">
                        <span>Menu Area 4</span>
                    </a>
                    <ul class="refinement-submenu">
                         <li>
                            <label>
                                <input type="checkbox" />
                                <span class="label_ttl">Submenu 1</span>
                            </label>   
                         </li>
                         <li>
                            <label>
                                <input type="checkbox" />
                                <span class="label_ttl">Submenu 2</span>
                            </label>                                            
                         </li>
                    </ul>
                </li>
            </ul>
            <div class="refinement-menu-btns bottom">
                <input type="button" class="cancel_refinement" value="CLEAR"/>
                <input type="button" class="apply_refinement" value="APPLY &#187;"/>
            </div>                            
        </nav>
    </div>


    <script>
    jQuery( document ).ready( function( $ ) {

        var $menu = $('#refinement-menu'),
          $menulink = $('.menu-link'),
          $menuTrigger = $('.has-submenu > a');

        $menulink.click(function(e) {
            e.preventDefault();
            $menulink.toggleClass('active');
            $menu.toggleClass('active');
        });

        $menuTrigger.click(function(e) {
            e.preventDefault();
            var $this = $(this);
            $this.toggleClass('active');
            $this.next('ul').slideToggle().addClass('active');
        });

    });
    </script>



</div>

Here's my jsfiddle: http://jsfiddle.net/j8aRt

Thanks in advance for any help!

Answer 1

You have to add class active to your ul.

Try:

<ul class="refinement-submenu active">

DEMO