Hide and show menubar

it will slide up and down respective chile upon click on parents

by RoryMcCrossan

HTML

<ul>
    <li><a href="#" id="title">Title & Slogan</a></li>
    <li><a href="#" id="social">Social Media</a></li>
    <li><a href="#" id="copyright">Copyright</a></li>
    <li><a href="#" id="update" class="showul">Update Pages</a>
        <ul class="hideul">
            <li>About Us</li>
            <li>Contact Us</li>
        </ul>
    </li>
    <li><a href="#" id="category" class="showul">Category Option</a>
        <ul class="hideul">
            <li>Add Category</li>
            <li>Category List</li>
        </ul>
    </li>
    <li><a href="#" id="postoption" class="showul">Post Option</a>
        <ul class="hideul">
            <li>Add Post</li>
            <li>Post List</li>
        </ul>
    </li>
</ul>

CSS

.hideul {
    display: none;
}

JavaScript

$(document).ready(function() {
    $(".showul").click(function() {
        var $hideUl = $(this).siblings(".hideul");
        var show = !$hideUl.is(':visible');
        $('.hideul').slideUp('slow');
        if (show)
        	$hideUl.slideToggle('slow');
    });
});