unordered HTML list with unordered list inside. Wrapped next each other

Question

Question by JohannesM

I get an unordered list by a cms that I want to style.
It works well, but only for the first <li id="link-18"> element. My goal is it to style the <ul> blocks all the way trough, like the first one. See http://jsfiddle.net/UyrdS/3/ (the second and third link shows the toggled <ul> block not on top)

goal

If the second link (level 2 two) is clicked, the toggled new <ul> block shows beside the navigation, but not on top like the level 1 one links does it with his children element <ul>

Answer 1

Answer by JohannesM

JohannesM

I gave up. I’m a pretty worse inquirer 🙂
Thanks for the answers. Kudos to you all for spending your time. This fiddle is the closest to my question.

http://jsfiddle.net/UyrdS/6/

But it’s not dynamic. It has a static width. That is still the problem.

Answer 2

Answer by Starx

Starx

I think this is what you wanted

alllinks = $("ul>li>ul");
$('nav a').on('click', function(e) {
    alllinks.hide(); //First hide all the links
    e.preventDefault();
    if ($(this).parent().children('ul').size() > 0) {
        $(this).parent().children('ul').toggle();
    }
});

unordered HTML list with unordered list inside. Wrapped next each other

Question by JohannesM

Answer by JohannesM

Answer by Starx

Author: Nabin Nepal (Starx)

Please fill the form - I will response as fast as I can!