Query - Open list element by href and show selected div

Question

This demo: http://jsfiddle.net/vv7rL8xv/1/

I want show my div for example "#test" by link <a href="#test">Click</a>

<ul>
    <li class="active">
        <a href="#test1">Lorem ipsum</a>
        <ul>
            <li><a href="#a">Lorem ipsum child</a></li>
            <li><a href="#b">Lorem ipsum child 2</a></li>
        </ul>
    </li>

    <li>
        <a href="#test2">Test text</a>
        <ul>
            <li><a href="#c">Text child</a></li>
            <li><a href="#d">Text child 2</a></li>
        </ul>
    </li>

    <li><a href="#x">List item</a></li>
    <li><a href="#y">List item next</a></li>
</ul>

<div id="test1">This is first div</div>
<div id="test2">This is second div</div>

JQUERY:

$(function () {

    $('div').hide();
    $('ul li ul').hide();
    $('ul li:first-child ul').show();
    $('div:first').show();

    $('ul > li').click(function() {

        $(this).children('ul').slideToggle();
        $('ul > li').not(this).children('ul').slideUp();

        $('ul > li').removeClass('active');
        $(this).addClass('active');

    });

    $('ul li > a').click(function(e){

        var href = $(this).attr("href");
        $(href).slideToggle().siblings('div').hide();

    });

});

now my code have bugs:

• after click a on list item, and after second click div and child ul is collapsed.
• after click to link on child ul is collapsed and expanded
• when id from href not exist then not hide active div for example "#test"

please help, check out demo and code ;)

Answer 1

Try,

$(function () {
    $('div').hide();
    $('ul li ul').hide();
    $('ul li').click(function () {
        $(this).siblings('li').children('ul').hide('slow');
        var ul = $(this).children('ul');
        if (!ul.filter(':visible').length > 0) {
            ul.show('slow');
            $($(this).find('a').attr('href')).show('slow').siblings('div').hide();
        }
    })
});

DEMO

Answer 2

$(function () {

    $('div').hide();
    $('ul li ul').hide();
    $('ul li:first-child ul').show();
    $('div:first').show();

    // $('ul > li').click(function() {
    //
    //    $(this).children('ul').slideToggle();
    //    $('ul > li').not(this).children('ul').slideUp();

    //     $('ul > li').removeClass('active');
    //     $(this).addClass('active');

    //  });

    $('ul li > a').click(function(e) {

        $('ul > li').removeClass('active');
                      $(this).closest('li').addClass('active').find('ul').slideToggle();
        var href = $(this).attr("href");
        $(href).slideToggle().siblings('div').hide();
        if($(href).length === 0) {
            $('div').hide();
        }        
    });

});