Font-Awesome-SVG-PNG | Font Awesome split to individual SVG | Animation library

it doesn't work because

1.( this is optional ) i think that your click functions should be included in the mobileViewUpdate function

2.close-btn is a child ( is inside ) of .mobile li so when you click on it, you also click on li so you remove and add class in the same time

you should check ( when click on mobile li ) if the element you click is the close btn , and if it is, cancel the click . So when you click on close-btn the code won't interpret that you clicked on li also

3.in the close-btn click function you write $(this).find('li.active').removeClass('active') . find() only searches INSIDE the element . in this case, li is a parent of the close-btn , but not an immediate one, so you need to use parents() to find the li.active

see code below or jsfiddle jsFiddle

The easiest way to animate width is to set the width to 100% and then animate the max-width instead.

Also it's a good idea to addClass / removeClass instead of animating with jQuery directly

Here's what I changed/added in the CSS. Then the javascript only adds the .expand