Develop Reference

How to remove previous active classes in jQuery

I am make a list and in the list when I click it toggles class active but previous elements still contains active class when I click on different element
<ul>
<li class="click_me">Here </li>
<li class="click_me">Here </li>
<li class="click_me">Here </li>
<li class="click_me">Here </li>
</ul>
$(document).ready(function()
{
$('.click_me').click(function()
{
$.each(function()
{
$('.click_me').toggleClass('active');
});
$(this).toggleClass('active');
});
});
<style>
.active
{
background-color: red;
}
</style>
What I want is that when I click on different li element previous li's active class must be toggled out. Sorry for poor english!
I tried to add each loop but it didn't work.

To get this to work you simply need to remove the .active class from any elements that already have it, excluding the current element, which should be toggled. Try this:
$('.click_me').click(function() {
$('.active').not(this).removeClass('active');
$(this).toggleClass('active');
});
.active {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="click_me">Here</li>
<li class="click_me">Here</li>
<li class="click_me">Here</li>
<li class="click_me">Here</li>
</ul>

The correct way is to use event-delegation:
$('ul').on('click', '.click_me', function(){
$(this).toggleClass('active').siblings().removeClass('active'); // <--- The trick!
})
.active{ background:lightblue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="click_me active">Click here</li>
<li class="click_me">Click here</li>
<li class="click_me">Click here</li>
<li class="click_me">Click here</li>
</ul>
That should do it!

Try this. It should work! All answers work!
$('.click_me').click(function()
{
$('.click_me.active').removeClass('active');
$(this).addClass('active');
});

$('.click_me').click(function()
{
// remove the .active class from all the .active elements.
$('.click_me.active').removeClass('active');
// add it to this one
$(this).addClass('active');
});

Try this.
Remove the class from all the li elements excluding the clicked element and toggle class on clicked element.
$(document).ready(function()
{
$('.click_me').click(function()
{
$("li.active").not(this).removeClass('active');
$(this).toggleClass("active");
});
});
.active
{
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="click_me">Here </li>
<li class="click_me">Here </li>
<li class="click_me">Here </li>
<li class="click_me">Here </li>
</ul>

display block with event target id

I'm try to display an item inside a list that has a class which is exactly the same ID on the other list. This would be activated when I click on the other list then it will find a match class on the other list then display it.
Here is the code I'm using basically the first list is in display:none;
List 2 is my menu on which in the list 1 would you like to display.
The first list should only have one visible item at a time.
Fiddle is here
HTML
<div id="gallery-container">
<li class="1723"><p>
123
</p></li>
<li class="1725"><p>
456
</p></li>
</div>
<ul id="gallery-list">
<li id="1723">
<strong>qwertyuiop</strong>
</li>
<li id="1725">
<strong>asdfghjkl</strong>
</li>
</ul>
SCRIPT:
$("#gallery-list li").click(function() {
alert(event.target.id);
$("#gallery-container li .wc-gallery").css("display", "none");
});
window.onload = function () {
$("#gallery-container li p").css("display", "none");
}
CSS:
#gallery-container li p {display:none;}

It's bad bad to use the same id in one HTML document. Never do this. Nobody likes that, jQuery doesn't like that. I don't like it. Try using a class or a data property.
But.. scratch that.. you are not really trying to do that. But still.. it's better to use a data property :)
Anyways, to accomplish this with a data property, you can do something like this:
html
<div id="gallery-container">
<li data-id="1723">
<p>
123
</p>
</li>
<li data-id="1725">
<p>
456
</p>
</li>
</div>
<ul id="gallery-list">
<li data-id="1723">
<strong>qwertyuiop</strong>
</li>
<li data-id="1725">
<strong>asdfghjkl</strong>
</li>
</ul>
js
$("#gallery-list li").click(function() {
var id = $(this).data('id');
$("#gallery-container").find('li').each(function() {
$(this).find('p').toggle($(this).data('id') === id);
});
});
jsfiddle

If you want to fetch the id of the list you clicked:
$("#gallery-list li").on("click", function() {
alert($(this).attr("id"))
$("#gallery-container li .wc-gallery").css("display", "none");
});

$('#gallery-list li').click(function() {
var targeeet = $(this).attr('id');
$('.' + targeeet).children().css('display', 'block');
});
Try this.

All you need is :
$('#gallery-list li').click(function() {
var target = $(this).attr('id');
$("#gallery-container li").hide();
$("#gallery-container li."+target).css('display', 'block');
});
Check the example below :
$('#gallery-list li').click(function() {
var target = $(this).attr('id');
$("#gallery-container li").hide();
$("#gallery-container li."+target).css('display', 'block');
});
#gallery-container li{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="gallery-container">
<li class="1723">
<p>
123
</p>
</li>
<li class="1725">
<p>
456
</p>
</li>
</div>
<ul id="gallery-list">
<li id="1723">
<strong>qwertyuiop</strong>
</li>
<li id="1725">
<strong>asdfghjkl</strong>
</li>
</ul>

Are you trying to do an accordion?
$("#gallery-container li").hide();
$("#gallery-list li").click(function() {
$("#gallery-container li").hide();
$("#gallery-container li."+this.id).show();
});
jsFiddle

JavaScript menu dropdown onClick does not work

I am trying to make the drop down menu toggle on click but the JavaScript does not work with this html and css, while it works in other projects. The drop down enabled on hover before but I deleted ...: hover {display: block;}
Rest of the code in CodePen --> http://codepen.io/anon/pen/bNbzjM
HTML
<li id="active">УСЛУГИ
<div id="block_menu">
<ul class="pod_nav1">
<li>SEO Pakalpojumi</li>
</ul>
<ul class="pod_nav2">
<li>SEO Pakalpojumi</li>
</ul>
<ul class="pod_nav3">
<li>SEO Pakalpojumi</li>
</ul>
<ul class="pod_nav4">
<li>SEO Pakalpojumi</li>
</ul>
</div>
</li>
JavaScript
$(document).ready(function () {
$("li").click(function () {
$('li > ul ').not($(this).children("ul").toggle()).hide();
});
});
CSS

may be this will help. don't forget to include jquery.js
$("li").on('click',function() {
$('li > ul ').not($(this).children("ul").toggle()).hide();
});

View Live jsFiddle
j- Query
$(document).ready(function () {
$("li").click(function () {
$(this).children().children().toggle();
});
});

issue is in javascript plz check below code
$(document).ready(function () {
$("li").click(function () { $(this).find('#dropmenu').children('ul').toggle('slow');
});
});

On-click drop-down nav menu

I am making a column list with some drop-down menus and I needed the Jquery for the drop-down to make it work.
I have found some Jquery for this but the problem is when you have two menus with ul and li, like this.
HTML:
<ul class="list-menu">
<li class="sort-menu">4</li>
<div class="sort-list-dropdown">
<ul class="sort-list">
<li>4</li>
</ul>
</div>
</ul>
When you duplicate this two times and then when you click the 4 on the class that says sort-menu, it will put up two menus containers and that class is sort-list-dropdown I have been playing with JS I got from somewhere and I'm getting confused about this issue.
JavaScript:
$("ul.list-menu > li").click(function () {
var X = $(this).attr('id');
if (X == 1) {
$("ul.sort-list > li").hide();
$(this).attr('id', '0');
} else {
$("ul.sort-list > li").show();
$(this).attr('id', '1');
}
});
//Mouse click on sub menu
$("ul.sort-list > li").mouseup(function () {
return false;
});
//Mouse click on my account link
$("ul.list-menu > li").mouseup(function () {
return false;
});
//Document Click
$(document).mouseup(function () {
$("ul.sort-list > li").hide();
$("ul.list-menu > li").attr('id', '');
});
I get some of the variables but I do not think it's the code. I think I need to input a new variable but I do not know what does it need for it.
If anybody knows how to accomplish this, then please reply back to me.

I have one answer for this problem. Please try this code below:
$(document).ready(function() {
$('.sort-list-dropdown').hide();
$('ul.list-menu li').click(function() {
$(this).next('.sort-list-dropdown').toggle();
});
});
In code 'click', you can change it to 'hover'.

Try something like this:
http://jsfiddle.net/SinisterSystems/bmwBr/5/
HTML:
<ul>
<li class="sec">Heading One</li>
<li><ul>
<li>Secondary</li>
<li>Secondary</li>
<li>Secondary</li>
<li>Secondary</li>
<li>Secondary</li>
<li class="sec">Heading Two</li>
<li><ul>
<li>Third</li>
<li>Third</li>
<li>Third</li>
</ul></li>
</ul></li>
<li class="sec">Heading One</li>
<li><ul>
<li>Secondary</li>
<li>Secondary</li>
<li>Secondary</li>
<li>Secondary</li>
<li>Secondary</li>
</ul></li>
</ul>
JS:
$(function(){
$('li.sec').on('click', function() {
$(this).next('li').slideToggle();
});
});
CSS:
ul li {
list-style:none;
}
.sec {
background:#efefef;
padding:25px;
font-size:24px;
}
Try something like this:
http://jsfiddle.net/SinisterSystems/bmwBr/5/

Detect event when class is added to li

Having html list as ,
<ul id="slider">
<li class=""></li>
<li class=""></li>
<li class=""></li>
<li class="selected"></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>
<ul>
I am adding selected class to any of the li element.
Here i have added class="selected" to fourth li element.
Want to execute some code when class selected is added to any of the li element.
tried this one , but not working as expected.
<script>
$(function() {
$('#slider').bind('DOMSubtreeModified', function(e) {
alert("Changed");
});
});
</script>

Just invoke a function after you add the Class on the click event.
$(function() {
function doSomething() {
.....
}
$('ul').on('click', 'li' function(e) {
$(this).addClass('selected');
doSomething();
});
});

The best way to handle this is just to call your function when you add the class, since it's your code adding it.
There are two common ways to do that:
You might do that with a direct call:
li.addClass("selected");
doSomethingBecauseItChanged(li);
Or you can do it by raising your own event on the li element that other code can listen to, which more thoroughly decouples the code adding the class from the code responding to the change.
Here's the code listening for the event:
$("#slider").on("added-class", function() {
alert("Changed");
});
And here's the code adding the class and raising the event:
li.addClass("selected").trigger("added-class");
Note that added-class is a name I made up, not something that already exists. Use whatever name you like, just make sure not to conflict with existing event types.
Here's a complete example: Live Copy | Live Source
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Event Example</title>
<style>
li.selected {
color: green;
}
</style>
</head>
<body>
<p>In two seconds, the third item will turn green and you'll see an alert.</p>
<ul id="slider">
<li class="">xxxxx</li>
<li class="">xxxxx</li>
<li class="">xxxxx</li>
<li class="">xxxxx</li>
<li class="">xxxxx</li>
<li class="">xxxxx</li>
<li class="">xxxxx</li>
</ul>
<script>
$("#slider").on("added-class", function() {
alert("Changed");
});
setTimeout(function() {
$("#slider li").eq(2).addClass("selected").trigger("added-class");
}, 2000);
</script>
</body>
</html>
Alternately, if you don't need IE support, you can use a mutation observer (support matrix), but frankly you really shouldn't need to use those if you control the code that's adding the class.

Register handler when you are adding the class.Something like this
$('li').addClass('selected').trigger('class-change');
$('#slider').bind('class-change', function() {
//do something
});
});