jquery html submenu click show/hide

Question

jquery newbie here. I have created vertical menu here.

What my goal is, when the first li being clicked, it will show the submenu. when the second li is being clicked, it will show the level 1 submenu and the first li will closed. And if I click on level 1 submenu it shows level 2 submenu and the li stay open.

This is what I have done so far http://jsfiddle.net/f4cfh6kx/2/

HTML:

First

    <ul>
        <li><a href="#">Second</a>

        </li>
        <li><a href="#">Second</a>

        </li>
        <li><a href="#">Second</a>

        </li>
    </ul>
</li>
<li class="showFirst"><a href="#">First<span
                    class="sb-caret"></span></a>

    <ul>
        <li class="showSecond"><a href="#">Second<span
                            class="sb-caret"></span></a>

            <ul>
                <li><a href="#">third</a>

                </li>
                <li><a href="#">third</a>

                </li>
            </ul>
        </li>
        <li><a href="#">Second</a>

        </li>
        <li><a href="#">Second</a>

        </li>
    </ul>
</li>

JSP:

$(function () {
$('.showFirst').click(function () {
    $(this).children('ul').slideToggle();
    $('.showFirst > li').not(this).find('ul').slideUp();
});
$('.showSecond').click(function () {
    $(this).children('ul').slideToggle("slow");
});

});

CSS:

ul {
list-style: none;
cursor: pointer;
}
a {
    color: black;
    line-height: 25px;
    text-decoration: none;
}
a:hover {
    color: #aaa;
    text-decoration: none;
}
span.sb-caret {
    width: 0px;
    height: 0px;
    display: inline-block;
    margin: 0px 5px;
    border: 5px solid transparent;
}
span.sb-caret {
    /* Caret Down */
    border-top: 5px solid;
    border-bottom: 0px solid transparent;
}
.sb-submenu-active > span.sb-caret {
    /* Caret Up */
    border-top: 0px solid transparent;
    border-bottom: 5px solid;
}
ul li > ul {
    display: none;
    /*  border:1px solid black; */
}

Answer 1

JS Fiddle

$('.showSecond').click(function () {
    $(this).children('ul').slideToggle("slow");
    return false; /** add this line **/
});

Edit Toggle

JS Fiddle

just remove li from below code

$('.showFirst').not(this).find('ul').slideUp();