Develop Reference

Can not get expand navigation to work on nav

I recently have been experimenting with jquery in hopes to expand my knowledge. I have come across something odd though. I have a navigation where I want users to be able to expand it even further. However, everytime I click expand it opens up all menus rather than a specific one.
$('.expandicon').click(function(){
if ( $('.nav-bucket-items').css('display') == 'none' )
$('.nav-bucket-items').css('display','block');
else
$('.nav-bucket-items').css('display','none');
});
Here is the code I've used and here is the example: https://jsfiddle.net/xajoujsx/
As you can see, when you click the expand + button, it opens up all navigation. I just wanted it to open up the one I click around. Can anyone explain what I'm doing wrong?

From inside the click handler you can refer to .nav-bucket-items using:
$(this).parent().siblings('.nav-bucket-items')
fiddle

The code currently performs it on all elements with class .nav-bucket.
One option is to only apply to the immediate items for the parent.
$('.expandicon').click(function() {
var $ref = $($(this).parent().parent()).find('.nav-bucket-items')
if ($ref.css('display') == 'none')
$ref.css('display', 'block');
else
$ref.css('display', 'none');
});

Few things going on here, first, you're targeting all of the elements when you do $('.nav-bucket-items')
If you run that in your console you should see a list of elements rather than a single one, so what we want to do is target the parent, and then find the sibling, we also want to target the element link not the icon so that way the user can click the entire element to expand.
Working example: https://jsfiddle.net/dg4z271m/1/

I love it when I can learn someone more about their code than just fix the code for the sake of answering the question.
First, let me start by saying you don't need the .css('display','block'); to show or hide elements because .show() en .hide() does that for you. Amazing isn't it?
So, now we are left with this.
$('.expandicon').click(function(){
if ( $('.nav-bucket-items').css('display') == 'none' )
$('.nav-bucket-items').show();
else
$('.nav-bucket-items').hide();
});
But now we still have the problem of the multi-expanding menu. This is because you show (or hide) alle elements with the class '.nav-bucket-items' We just wan't the ones that are family of the .expandicon we've clicked! You can do that with $(this). You can use $(this) to traverse from the element you've clicked. Lets see.
$('.expandicon').click(function(){
if ( $('.nav-bucket-items').css('display') == 'none' )
$(this).parent().next('.nav-bucket-items')
else
$(this).parent().next('.nav-bucket-items')
});
When you use this, it will all be working as you wished. But we can do better than this! We can make it shorter, better and cleaner. We don't have to check if .nav-bucket-items is visible. Nope.
$('.expandicon').click(function(){
$(this).parent().next('.nav-bucket-items').toggle();
});
Did you see what happened? We just changed that whole bunch of code to one line that just toggles the element. So it will hide it when its shown and it will show when its hidden! If you really want some fancy effects, you could use slideToggle() or fadeToggle() instead of .toggle(). I updated your JSFiddle: https://jsfiddle.net/xajoujsx/3/

Unveiling Hidden Nested Subnavigation Menus

I have been working with a navigation menu that uses a sub-navigation menu that is hidden but shown using jQuery. The problem is that I now need to add an additional sub-navigation menu that is nested within the sub-navigation menu that I have already created.
I have a JSFiddle that recreates my problem here: http://jsfiddle.net/Learner12/xkaxbhvj/
Basically, I am trying to get the links (Link D, E, and F) to show underneath "Sub-submenu Nav 1".
The current code that I am using only encompasses the first sub-navigation menu, not the one to be nested within it:
JS:
var main = new function () {
$('.trigdrop').click(function() {
$('.trigdrop a:first-child').removeClass('borderIndent');
$('.submenu').slideUp();
$(this).children('a:first-child').addClass('borderIndent');
$(this).children('.submenu').slideDown(400);
});
I tried following the same guidelines by making a "trigdrop2" and a "submenu2" but unfortunately could not solve the problem. I think it has something to do with with this line of code:
$('.submenu').slideUp();
That line simply brings everything back up, but I do not know of another method to ensure only one sub-menu is opened at any given time while allowing a "sub-sub-navigation menu" to be opened within that given sub-navigation menu.
Please view the JS fiddle for the accompanying HTML and CSS.

You are probably looking for the .not() jQuery function. This removes specified elements from the current jQuery object. So the line you were thinking was the problem,
$('.submenu').slideUp();
could be turned into
$('.submenu').not($(this).children('.submenu')).slideUp();
to select all .submenus except the one inside the clicked .trigdrop. Then the .trigdrop2 can be handled just as you were thinking:
$('.trigdrop2').click(function() {
$('.submenu2').not($(this).children('.submenu2')).slideUp();
$(this).children('.submenu2').slideDown();
});
(Note this uses .not() again). And here's your updated JSFiddle.

jQuery show list items

I have two ul's that when the top li is clicked it shows the others below and hides another opened in other ul's.
My problem is I had to add a View All link beside the main li which I want to direct the users to a view all page while still allowing them to click main li to display the list.
I have put another a tag beside the main li's but now I cant get the show feature too work. Not sure what might be wrong.
I am not a great at traversing the dom and I know I have the siblings worng.
http://jsfiddle.net/ukkpower/En7KV/8/

EDIT: Sorry, I missed the hide all others requirement. Thanks for the comment. Please look at the link now and that issue should be resolved.
Note that I've wrapped the lists in a div called _sidenav. I much prefer this approach to looking for siblings as it's a bit easier to read and interpret at a glance and has less room for confusion in the future.
I think I understand what you want. Take a look at this fiddle:
http://jsfiddle.net/CU9zg/3/
I'm assuming the View All link is suppose to take you to another page, while the main li for a list acts like an accordian, hiding or showing the other items when clicked.
$('ul li.cat-item', $('#_sidenav')).hide();
$('.cat-item', $(this).closest('ul')).toggle();

Try this - http://jsfiddle.net/En7KV/10/
$('a.show_list').on('click', function(e){
e.preventDefault();
$(this).parent().siblings().toggle();
$(this).closest('ul').siblings().find('li a.show_list').parent().siblings(':visible').hide();
});

side sliding menu tab

i want to implement a right side sliding menu similar to the one in amazon.com..
i am trying to use javascript to edit the script on every mouseover/onclick event..
i want to hide/show the table on every event.
function show(a){
var id="myMenu"+a
if (i<-12){
i=i+speed;
document.getElementById(id).style.left=i;
}
}
function hide(a){
var id="myMenu"+a
if (i>-135){
i=i-speed;
document.getElementById(id).style.left=i;
}
}
this should be good to show/hide the tables.. but how to id dynamically add two tables one over another..because the main menu table will always be visible, but the sub menu when hidden will be beneath the main menu..
any method to do the same?
am i in the right path?

Definitely on the right path, this is a good test of concept.
I would suggest you look at jQuery (or other JavaScript libraries like Scriptaculous) specifically at the slideToggle() and toggle() methods.
Don't want to give it all away, but take a look at the Amazon source code, you may get some helpful little tips. :P

Changing styles on navigation links - including next and prev buttons

I'm currently working on a website for a Danish company. The content is all in one page and I've included some jQuery-scrolling and stuff. Works nice!
For the menu I'm asked to programme the elements so the active element is bold. That I've done too.
The problem comes here:
The client wants a home button and a next and previous button. But when I click them and the page scrolls the CSS-classes do not change for the active element - so the bold element in the menu is still the last clicked page.
I hope that anyone can help.
The page can be seen at:
http://vedelform.dk/new/intro/

In addition to calling the serialscroll plugin, the event handler for the images needs to update the appropriate class name on your navigation link. When you click on a navigation link directly, you call the changeActiveStates function, but that isn't happening with the home, next, and previous buttons.
You should use the onBefore attribute of the serialScroll plugin to define a method that will figure out which navigation link is supposed to receive the class name. It can then call the changeActiveStates function.
It doesn't look like it would take more than a few more lines of code to fix your problem. If you need more help getting it to work, let me know.
edit:
If you add this (starting at line 84 of init.js), you should be in business:
easing: 'swing',
onBefore:function(e, elem, $pane, $items, pos){
if ((pos >= 0)&&(pos < $('ul.navigation > li > a').size())) changeActiveStates($('ul.navigation > li > a').get(pos));
return true;
}
You will then need to call changeActiveStates (probably after you initialize the function) on page load to initialize the correct menu item.
I hope that helps; let me know if it gives you any more trouble.

You used minified version of scripts so it is very hard to debug the code. Also you didnt give us name of plugin you use. I think there is a bug in plugin. Because css class "selected" sould jump from one menu item to another.

#Jason Francis:
You're probably right. I'm not that much into jQuery and Javascript and what I've done so far is more luck than it's knowledge. I did A LOT of trial and error.
I understand what you're saying about getting the serialScroll plugin to figure out what element to call changeActiveStates on - but I seriously don't know how to do that.