We Keep Coding

Collapsing only the top level in CSS tree

In my template, I have used the same tree structure code as used in this question. The answer to that question opens the page up with the tree entirely collapsed (jsfiddle).
However, I would like to implement this such that when first opening the page all the top level directories of the tree are collapsed (in the top example the Parent folders), but clicking on one of the top level directories will fully open up all the child branches. Right now it will only open one level down. I would appreciate any help with accomplishing this.
Current Javascript for tree is below.
$(function () {
$('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
$('.tree li ul > li').hide();
$('.tree li.parent_li > span').on('click', function (e) {
var children = $(this).parent('li.parent_li').find(' > ul > li');
if (children.is(":visible")) {
children.hide('fast');
$(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
} else {
children.show('fast');
$(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
}
e.stopPropagation();
});
});

Try changing
var children = $(this).parent('li.parent_li').find(' > ul > li');
to
var children = $(this).parent('li.parent_li').find('li');

Onepage navigation script needs to troggle / close on click on link

I have an onepage site with a responsive navigation script. Works great.
When you click on the Navigation button the "subnav" links show up. (These are anchors).
I need to toggle/close the subnav when clicking on a link/anchor.
Made an example here:
https://jsfiddle.net/fourroses666/jcj0kph2/
The script:
$(document).ready(function(){
$('nav').prepend('<div class="responsive-nav" style="display:none">Navigation</div>');
$('.responsive-nav').on('click',function(){
$('nav ul').slideToggle()
});
$(window).resize(function(){
if ($(window).innerWidth() < 768) {
$('nav ul li').css('display','block');
$('nav ul').hide()
$('.responsive-nav').show()
} else {
$('nav ul li').css('display','inline-block');
$('nav ul').show()
$('.responsive-nav').hide()
}
});
$(window).resize();
});

You may tidy up your code a bit by doing the prepend and attaching the click handler all in one statement as below.
var $nav = $('#nav').
prepend('<div class="responsive-nav" style="display:none">Navigation</div>').
on('click', '.responsive-nav, ul a', function() {
$nav.find('ul').slideToggle()
});
Updated fiddle
Note: I used $nav.find('ul') to target the specific nav in question as opposed to other navs that may exist on the page.
Edit: To make it not disappear when on >= 768, replace $nav.find('ul').slideToggle() with the following.
if (evt.target.tagName === 'A' && $(window).innerWidth() >= 768) {
return;
}
$nav.find('ul').slideToggle()
Updated fiddle

I'm assuming you want the Nav to hide when you click on a link?
/* This executes when the nav or li (inside #nav) is pressed */
$('#nav').on('click', 'li, .responsive-nav', function(){
$('nav ul').slideToggle()
});
https://jsfiddle.net/jcj0kph2/1/

Removing active class on click issue

I have some filters on a project I'm working on that once clicked, it's given a class of active, which will then show a div inside the clicked list item called info-pane.
The filters are the 6 blue boxes. I am using the jQuery below to add and remove the active class, however the issue comes when I want to try and remove the active class by clicking the list item that has the active class state but it doesn't seem to work.
The code I'm trying;
$(".filters > ul > li").click(function() {
$(".filters > ul > li").removeClass("active");
$(this).toggleClass("active");
});
$(".filters > ul > li.active").click(function() {
$(this).removeClass("active");
});
Here's a link to the live project; http://client.n8geeks.com/

Try this:
$(".filters > ul > li").click(function() {
$(".filters > ul > li").not($(this).toggleClass("active")).removeClass("active");
});

First you don't need to make two events for that click. Here is example to do in one. But i can't see where your problem is. In your live project i can see that filters change after you click..?
$(".filters > ul > li").click(function() {
$(".filters").find('li').removeClass('active');
$(this).addClass("active");
});
Edit:
I don't know if i understood correctly, but i can see when you click on 'x' nothing happens.. so function that reset your filters.
(non-tested)
$(".close").click(function(){
$(this).closest('ul > li').find('input[type="checkbox"]').each(function( index ) {
$(this).prop('checked', false);
});
});

Shows a dropdown element with jQuery

Currently I'm recreating the Office 2013 ribbon in Html, css and javascript.
This is my first approach so don't judge me on css/html/js code.
Currently the ribbon is working with a dropdown but I have an issue.
The dropdown is showed when you click the corresponding icons, but I don't know how to hide it if I click anywhere in the document.
I can probably come up with a solution, but I'm not too sure that it will be a good approach.
Can someone have a look and given me a good solution to accomplish this?
I've created a fiddle here: http://jsfiddle.net/Complexity/mwCCt/
Here's the code to open it:
$("#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon").children().each(function(index) {
if ($(this).hasClass("menu")) {
var element = $(this);
$('<i class="fa fa-sort-asc arrow"></i>').appendTo($(this).prev());
// Add a click event to the element that contains a menu.
$(this).parent().click(function() {
$(element).toggle();
$(element).parent().addClass("active");
});
}
});
Just click the "New items" button on the ribbon (second one) and then the dropdown menu will open.
Thanks in advance.
Kevin

We can take advantage of the stopPropagation() function:
$("#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon").children().each(function(index) {
if ($(this).hasClass("menu")) {
var element = $(this);
$('<i class="fa fa-sort-asc arrow"></i>').appendTo($(this).prev());
// Add a click event to the element that contains a menu.
$(this).parent().click(function(e) {
// Stops click event from bubbling up to $(document)
e.stopPropagation();
// Do stuff
$(element).toggle().parent().addClass("active");
});
}
});
// Bind click event to document, to hide any .menu elements that are open
$(document).click(function() {
$('.menu').hide();
});
});
p/s: You should take advantage of chaining, so I combined the two lines referencing $(element) into a single one :) that is one of the most powerful features of jQuery, so go crazy :D
Update: OP asked to also detect click events within the menu item itself. This entails storing the toggle state somewhere, which I have chosen to use the data object for, and sniffing the toggle state on click before deciding to open/close the menu (and perform other actions, such as adding/removing class from parents):
$("#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon").children().each(function(index) {
if ($(this).hasClass("menu")) {
var element = $(this);
$('<i class="fa fa-sort-asc arrow"></i>').appendTo($(this).prev());
// Add a click event to the element that contains a menu.
$(this).parent().click(function(e) {
e.stopPropagation();
// Check toggle state
if(!$(this).data('state') || $(this).data('state') == 0) {
// If menu is closed, show it
$(element).show().parent().addClass('active');
// Update state
$(this).data('state', 1);
} else if ($(this).data('state') == 1) {
// If menu is already open, close it
$(element).hide().parent().removeClass('active');
// Update state
$(this).data('state', 0);
}
});
}
});
$(document).click(function() {
$('.menu').each(function() {
$(this).hide().parent().data('state', 0).removeClass('active');
});
});
See updated fiddle here: http://jsfiddle.net/teddyrised/mwCCt/5/

Bind a click event on the document, check that the target of the click is not the icons, then hide the element as needed
jQuery(document).on("click",function(e){
if( !jQuery(e.target).hasClass("icon") ) {
//hide ribbon code here
}
});

Add a event listener when you show it that is basically
$(document).on('click', function(){
//hide dropdown
});
You will want to destroy this event listener after you hide
without being tested... something like this
$("#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon").children().each(function(index) {
if ($(this).hasClass("menu")) {
var element = $(this);
$('<i class="fa fa-sort-asc arrow"></i>').appendTo($(this).prev());
// Add a click event to the element that contains a menu.
$(this).parent().click(function() {
$(element).toggle();
var dd = $(element).parent();
dd.addClass("active");
hideDD = function(){
dd.removeClass('active');
$(document).removeEventListener('click',hideDD);
};
$(document).addEventListener('click',hideDD);
});
}
});

Simply write the relevant code in the focus-out event of the element

jQuery multi level navigation

Hello i have created a multi level navigation in magento. Now i have a problem with the opening and closing of my menu. I want my menu to close the "active" Top Menu when the other Top Menu is clicked.
I cant seem to get this part correct.
Javascript:
jQuery(document).ready(function(jQuery) {
jQuery(".sub_category").hide();
jQuery(".sub_sub_category").hide();
jQuery('#product-nav li a').click(function () {
jQuery('#product-nav li a').removeClass('active');
jQuery(this).addClass('active');
});
jQuery('ul li.expanded a').each(function(i){
var subUl = jQuery(this).parent().find('ul'); //Get the sub ul.
jQuery(this).bind('click',function(e){
// Prevent the default action of the link
subUl.toggle();
}) ;
});
jQuery(".head_child").click(function(e) {
e.preventDefault();
});
jQuery('li:has(ul) > a').click(function(e) {
e.preventDefault();
});
var url = window.location.toString();
jQuery('ul li.expanded a').each(function(){
var myHref= jQuery(this).attr('href');
var subUl = jQuery(this).parent().find('ul'); //Get the sub ul.
if( url.match(myHref)) {
jQuery(this).addClass('activeElement')
subUl.toggle();
}
});
});
Please see my jsfiddle for the example of my code.
http://jsfiddle.net/wvEcF/1/