We Keep Coding

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);
});
});

show one div and hide the rest using javascript

I have this script that shows/hides a div. Could anyone please explain how I can get it to show only one div at a time?
<script>
function Show_Div(Div_id) {
if (false == $(Div_id).is(':visible')) {
$(Div_id).show();
}
else {
$(Div_id).hide();
}
}
</script>
and the link...
onClick="Show_Div(Div_1)
Thanks!

Try using this
$(document).ready(function(){
$('.parent div').hide(); // hide div's on load using parent class as a starting point
$('#nav a').click(function() { // on the anchor clicks that are inside div with id=nav
var $div = $('.parent div').eq($(this).index('#nav a')); // get the relevant div
$div.show(); // show the relevant div
$('.parent div').not($div).hide(); // hide all but the relevant div
});​
}):

if i understand your question correctly , maybe you can try this way:
<script>
function Show_Div(Div_id) {
if (false == $(Div_id).is(':visible')) {
$(this).show();
}
else {
$(this).hide();
}
}
</script>
if your use this in
$(this).show();
the only one will toggle which your click~
but in this way :
$(Div_id).show();
you will get a array of target , because the selector of Jquery will select a array of target .
hope it will help you~

Show/Hide with plus minus

So I've got it to work that it shows/hides the UL's/LI's, but I'm not sure what I'm doing incorrectly where it's not swapping out the +/- signs?
Here's my JS:
$(".top ul li:not(:has(li.current))").find("ul").hide().end() // Hide all other ULs
.click(function (e) {
if (this == e.target) {
$(this).children('ul').slideToggle();
}
$(this).children("li.menu-item-has-children").text(this.toggle ? "-" : "+");
return false;
});
I have a class setup to append the li with a li:before that add the + sign before the li that has the nested ul's. But I'm not sure if I am going about it the right way to swap out the signs.
Here's the fiddle that I made:
http://jsfiddle.net/bc4mg13a/

There you go: http://jsfiddle.net/bc4mg13a/13/
$(".menu-item-has-children").on("click", function(e){
e.stopPropagation();
var clickedLi = $(this);
$("> ul", clickedLi).slideToggle();
clickedLi.toggleClass("current");
});
To start with, your first js line is a has so much redundant stuff.
$(".top ul li:not(:has(li.current))").find("ul").hide().end() // Hide all other ULs
.click
could be:
$(".top ul li:not(.current)").find("ul").hide().end() // Hide all other ULs
.click
On the other hand, i changed your code slightly, simplified your selectors. On each li click, i select direct ul children, and the i slidetoggle + toggle class the 'current' class.
i also switch the plus sign via the current class on css.

Your code feels incredibly verbose. Well, at least your js. Here's a fiddle of your code that I modified a little bit.
Instead of hiding all your menus with js immediately on pageload, I applied a CSS display: none; to the sub-menu class:
.sub-menu {
display: none;
}
The js is cleaned up a bit, and since the click handler is bound to .menu-item-has-children, You're really only clicking on that to reveal the contained UL.
Give it a look. Hope it helps :)

Simply add:
$(this).toggleClass('open');
To this:
if (this == e.target) {
$(this).children('ul').slideToggle();
$(this).toggleClass('open'); // <--
}

you can just add $(this).toggleClass('open'); before you return false but I would strongly look more into what your code is doing. I'm not so sure the line before is doing anything.

Fixed JS:
$(".top ul li:not(:has(li.current))").find("ul").hide().end() // Hide all other ULs
.click(function (e) {
if (this == e.target) {
$(this).children('ul').slideToggle();
$(this).toggleClass('open'); // added
}
return false;
});
Just added "$(this).toggleClass('open');" to use the class you specified in your CSS instead of trying to manipulate the text manually.

you can do it like this and add $(this).toggleClass('open');
http://jsfiddle.net/bc4mg13a/5/

For how you have it set up, I would try...
$(".top ul li:not(:has(li.current))").find("ul").hide().end() // Hide all other ULs
.click(function (e) {
if (this == e.target) {
$(this).toggleClass("open");
$(this).children('ul').slideToggle();
}
return false;
});
Additional:
For formatting, you might want to do something like:
.menu-item-has-children {
&:before {
content:"+ ";
color: $white;
width: 10px;
display:inline-block;
}
}
.open {
&:before {
content:"- ";
color: $white;
width: 10px;
display:inline-block;
}
}

You don't need to use text(this.toggle ? "-" : "+");
Inside the condition, just toggle the class .open that you have already defined in your SCSS/CSS.
Like so -
$(this).toggleClass('open');
JSFiddle

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 execute action based on element's parent tag

I have the following:
<ul class="head clearfix">\
<li class=""><strong>Katalog firm <span>(3516)</span></strong></li>
<li class="">Katalog produktów <span>(23752)</span></li>
<li class="">Katalog uslug <span>(81)</span></li>
<li class="last">Katalog szkolen <span>(529)</span></li>
</ul>
I need to execute a mouseover effect only on links that do NOT have <strong> tag as parent. So in the example above I would skip "Katalog firm" link since that one has a tag as parent.
thanks

your css selector would be
ul.header > li > a.menuTabs:hover
to define the hover effect
if you need some jquery functionallity, you can use
$('ul.header > li > a.menuTabs')
to get those elements

Just filter out the elements that has a parent with the strong tag from the selector and attach the mouse events :
​$('ul.head li a')​.filter(function() {
return !$(this).parent().is('strong');
}).on('mouseenter', function() {
$(this).css('color','green');
});​
FIDDLE

This could be defined in CSS only by using the direct child selector >
ul.head > li > a.menuTabs:hover
{
/* hover style */
}
You can use the same selector in jquery
$('ul.head > li > a.menuTabs')

$('.head').on('click', 'li > a', function(evt) {
//do something
});

I'd suggest, as an alternative to using a more specific selector (probably the better option in most cases) checking the parent element in the mouseover event:
$('a').on('mouseover', function(e){
var that = this;
if ($(that).parent().is('strong')) {
return false;
}
else {
// do stuff.
}
});

$('.head > li > .menuTabs').mouseover(fucnction () {
// code here
});

Please use like this.
ul li>a:hover
{
background-color:black;
}​