Develop Reference

jQuery fadeIn: Children should not be faded

I have built an collapsable tree with li and ul elements. I am using the jQuery.fadeIn and jQuery.fadeOut to collapse respectively show branches in the tree by applying these functions to nested ul elements.
Works nearly perfect, but a small problem appears when collapsed branches are shown: If the branch to show contains collapsed branches itself, the collapse state of these branches will not be preserved meaning that all the child branches will also be shown.
<li id="branch1"> Item 1
<ul style="display:none">
<li> Branch 1
<ul style="display:none">
...
</ul>
</li>
</ul>
</li>
If I now call the following, also the Branch 1 will be faded in.
jQuery("#branch1 ul").fadeIn();

Its because your query is getting both the elements. $('#branch1 ul') returns them both. Use this to get just the first one:
var a= jQuery("#branch1>ul")
a.fadeIn();

It was my problem by applying the function to multiple elements using an incorrect jQuery-selector. The function should work as expected.

Your code structure be like this
<ul>
<li id="branch1"> Item 1 </li>
<ul style="display:none">
<li> Branch 1</li>
<ul style="display:none">
<li> Branch 3</li>
</ul>
</ul>
in this structure your jQuery code will be work .
jQuery("#branch1 ul").fadeIn();

how do I wrap my menu in to sub menu using jquery?

this is my site.
this is how I finally make it look like
I want to divide the the menu list items into two sub menu say menu left and right. And then wrap them in a div. This is make it easy for me to style them and this way they would stay responsive as well.
Now, I have been trying to achieve this by
jQuery( ".menu-item-580", ".menu-item-583",".menu-item-584",".menu-item-563").wrapAll("<div class='new' />").after(".menubar-brand");
I have trying this in browser console.
I also tried same above code by using appendTo() instead of after()
But, still no luck.

In your code you're basically doing this:
<ul>
<li>
<div class="new">
<li>
<li>
</div>
<li>
</ul>
which is not a valid markup.
The easiest way to goup <li>s would be to assign different additional css classes to different parts of the list:
<ul>
<li class="group1">
<li class="group1">
<li class="group2">
<li class="group2">
</ul>
Also, have a look at this: Is there a way to group `<li>` elements?

jQuery closest li with a class doesn't work

I have menu (list of categories), level-0 li has class ".cat_cat_h", level-1 .cat_par_c"
HTML:
<ul class="text-links">
<li class="cat_cat_h level-0">Item 1</li>
<li class="cat_cat_h level-0">Item 2</li>
<li class="cat_cat_h level-0 active">Item 3</li>
<li class="cat_par_c level-1" style="display: none;">Item 4</li>
<li class="cat_par_c level-1" style="display: none;">Item 5</li>
<li class="cat_par_c level-1" style="display: none;">Item 6</li>
<li class="cat_cat_h level-0">Item 7</li>
<li class="cat_cat_h level-0">Item 8</li>
<li class="cat_cat_h level-0">Item 9</li>
<li class="cat_cat_h level-0">Item 2</li>
<li class="cat_par_c level-1" style="display: none;">Item 7</li>
<li class="cat_par_c level-1" style="display: none;">Item 8</li>
<li class="cat_par_c level-1" style="display: none;">Item 9</li>
</ul>
I would like to show() only level-1 elements that go right after .level-0.active (item 4, item 5, item 6).
UPDATE
Final solution:
$(document).ready(function(){
$( ".level-0.active" ).nextUntil( ".level-0" ).show();
});

Description: For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
Source
That means the closest() function works in one direction. if you want to go to the parent <ul> and the back to another <li> you have to call the parent() function first, like this:
$(document).ready(function(){
$(".cat_cat_h").parent('ul').find(".cat_par_c").show();
});
edit after your edit:
If you want the previous and the next element of you selected element try this:
$(document).ready(function(){
$( ".level-0.active" ).prev().show();
$( ".level-0.active" ).next().show();
});

To be responsive to Paulchenkiller, I will amplify my answer.
Fluency in any language, spoken (English, Spanish, Italian, French, German, etc) or written (html, css, javascript, c++, pascal, basic, etc) requires the ability to express a certain concept, idea or task in a variety of different ways.
I will attempt to do so with this particular issue in as many ways that this particular noob can think of.
jQuery selectors - this has been nicely expounded on above, and the only comment I might make is the trivial downside in the use of jQuery in terms of its load time (microseconds to milliseconds), and perhaps slightly longer to run than native js (microseconds).
CSS classes - One way to handle this is the use of additional css classes - adding a class, say "li456" that is an "empty" class in the sense that it contains no CSS styling, and is only used to identify a particular line or lines of code. Here is a FIDDLE as an example. It's a bit inefficient in the sense that it can be difficult to follow the code with so many classes attached to a line of html, and needing to look up an additional class in the section or even an attached style sheet.
$(".li456").show();
CSS ids - Even more burdensome, since you can only use an id once on a page, and in this particular case, therefore need three ids. The same applies to ids as to classes, only worse, you have to look up three times the number of ids as classes - since one class can be associated with multiple html lines on a given page. Here is a FIDDLE that shows an example of the use of ids .
$("#li4, #li5, #li6").show();
A variant of CSS is the concept of pseudo classes which are beautifully explained by the experts at CSS-Tricks where they have a nice review of these flexible and powerful methods (http://css-tricks.com/pseudo-class-selectors/). The :lt(x) selects the first x elements of type. Here is the FIDDLE. The :lt() pseudo class is particular to jquery and not a part of the CSS standard.
$(".text-links .cat_par_c:lt(3)").show();
Pure javascript is also a possibility, but in this particular case you would have to add an id to the three elements in question. Here is the FIDDLE.
document.getElementById('li4').style.display='block';
document.getElementById('li5').style.display='block';
document.getElementById('li6').style.display='block';
Pure javascript can be used to select on the class name, and return an array that can be parsed by [n]. This FIDDLE shows an example of a brute-force method. This FIDDLE uses a for loop to go through three elements.
document.getElementsByClassName('cat_par_c')[n].style.display='block';
Then we move to "display" which can be handled with jQuery .show, .css('display', 'block') and javascript .style.display='block'. This FIDDLE demonstrates these methods.
$('.cat_par_c:eq(0)').show();
$('.cat_par_c:eq(1)').css('display', 'block');
document.getElementsByClassName('cat_par_c')[2].style.display='block';
And I'll bet there are many more ways...

Slide multi-level menu and breadcrumbs in Angular

Does anyone know how I could modify the following code to make a sliding multi-level menu and breadcrumbs in Angular, like this facebook help page?
My basic html code is like this:
<ul>
<li>
Electronics
<ul>
<li>back</li>
<li>Phones</li>
</ul>
</li>
<li>
Furniture
<ul>
<li>back</li>
<li>
Living Room
<ul>
<li>back</li>
<li>Bookshelves</li>
</ul>
</li>
<li>Patio</li>
</ul>
</li>
</ul>

In regards to the sliding menu, there are a ton of solutions out there. Here are some links:
http://www.sitepoint.com/pure-css-off-screen-navigation-menu/
http://blogs.sitepointstatic.com/examples/tech/css3-sliding-menu/index.html
To stay in the angular world you can switch out partials in different states or use something like ng-switch. There are really so many options it is difficult to give you a single answer.
In regards to the breadcrumbs, here are a few nice pre-built options:
jsc-breadcrumbs - a blog post with instructions
angular-breadcrumbs

How do I create a "two layer" lists using CSS?

I'm going for something similar to the classic iPhone "Swipe to reveal" look using
CSS
the code structure I'm aiming for is something like like
<ul>
<li>Top Content</li>
<li>Bottom Content</li>
</ul>
So that using javascript and css transition I can get the top layer to slide away and reveal the bottom layer. I've tried setting the bottom layer to top: -(height of li) and z-index -1 which sort of works (they do overlap) except there is a large space between the divs due to this (margin 0 padding 0 didn't fix that)
How else could I implement this?

I really think using same list to accomplish this is a terrible idea you should just use two different ul's http://jsfiddle.net/8JYA2/
<ul class="list-1">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<ul class="list-2">
<li>Back One</li>
<li>Back Two</li>
<li>Back Three</li>
<li>Back Four</li>
</ul>
I might be wrong but why are you aiming with that code structure?

I've got a working solution now after a bit of help and experimenting.
The solution was to to make one list, but put two divs per li and layer the divs.
Then using javascript, modify the left and right percentage on the divs so that the top div slides off. The code looks something like this
<ul>
<li><div>Top Content</div></li>
<li><div>Bottom Content</div></li>
</ul>
Combined with what I figured out before regarding setting the z-index higher on the top content it works great.