Q:

Toggling a sub-menu's visibility in jQuery

I'm not particularly advanced with jQuery but can't see why this isn't working.
I have a CSS drop down navigation that works on hover, to add support for touch devices I'm trying to get the sub-menu to drop down on click.
Any help would be much appreciated.
<nav id="navigation">
    <ul>
        <li>
            <a href="index" title="Section 1">Section 1</a>
        </li>
        <li>
            <a title="Section 2">Section 2</a>
            <ul class="sub-menu">
            <li>
                <a href="#" title="Option 1">Option 1</a>
            </li>
            <li>
                <a href="#" title="Option 2">Option 2</a>
            </li>
        </ul>
    </li>
</ul>
</nav>

.touch-show {
    display: block;
    opacity: 1;
    visibility: visible;
}

$(document).ready(function() {
    $('#navigation li a').click(function() {
        event.preventDefault();
        $(this).siblings('.sub-menu').toggleClass('touch-show');
    });
});

https://jsfiddle.net/sLx5hhxq/1/

A:

You just need to add a CSS rule to hide the sub level ul elements by default, then your code will work as it is.
ul li > ul {
    display: none;
}

Example fiddle
Don't forget you also need to include the event in the parameters list of your handler function.

Given your fiddle example, the problem is because the CSS rule you're using is not specific enough to override the default styles for the li element. Try this:
#navigation ul li ul.touch-show {
    display: block;
    opacity: 1;
}

Example fiddle

