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>
Related
I'm new to jQuery/js, and I'm trying to toggle colors on click with jQuery.
I need something like this:
When I click an item, it toggles a class to change color.
If I click an item once, it changes color. Then if I click another item it changes color, but the other items must return to their initial color.
I can manage to toggle each item color, but I'm unable to remove the class color from the others.
Only the <li> with the class submenu-toggler should change colors. The 2nd level ul should not have their lis changed.
The final code looks something like this:
$(".submenu-toggler a").click(function(){
$(this).siblings().removeClass('red');
$(this).toggleClass("red");
});
a {
color: gray;
}
.red {
color: red;
}
li {
list-style-type: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="main-nav-menu" class="menu-hide">
<li>Item1</li>
<li class="submenu-toggler">
Toggler<span></span>
<ul id="submenu-1" class="main-nav-submenu">
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
<li>sub4</li>
</ul>
</li>
<li>Item3</li>
<li>Item4</li>
<li class="submenu-toggler">
Toggler<span></span>
<ul id="submenu-2" class="main-nav-submenu">
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
</ul>
</li>
<li>Item6</li>
</ul>
I believe this is what you are looking for, by using .siblings() all what you have to do is to remove class .red from the siblings elements and then perform the toggle on the current clicked element
Update: its working now for other elements, note that I added a selector .red * to make sub-elements also colored in red:
$(".item").click(function(){
$(this).siblings().removeClass('red');
$(this).toggleClass("red");
});
li {
color: grey;
}
.red,
.red *{
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="item"><a>Item 1</a></li>
<li class="item"><a>Item 2</a></li>
<li class="item">
<a>Item 3</a>
<span>AA</span>
<ul>
<li>AA</li>
<li>AA</li>
</ul>
</li>
</ul>
<ul id="main-nav-menu" class="menu-hide">
<li class="item">Item1</li>
<li class="item submenu-toggler">
Toggler<span></span>
<ul id="submenu-1" class="main-nav-submenu">
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
<li>sub4</li>
</ul>
</li>
<li class="item">Item3</li>
<li class="item">Item4</li>
<li class="item submenu-toggler">
Toggler<span></span>
<ul id="submenu-2" class="main-nav-submenu">
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
</ul>
</li>
<li class="item">Item6</li>
</ul>
Here is my dynamically generated lists :
<ul class="config-swatch-list">
<li class='color' onclick="color_select();">
</li>
<li class='color' onclick="color_select();">
</li>
<li class='color' onclick="color_select();">
</li>
<li class='color' onclick="color_select();">
</li>
<li class='color' onclick="color_select();">
</li>
</ul>
and the js function:
function color_select() {
$('#color').click(function()
{
if ($(this).hasClass('active')) {
console.log('clicked');
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
});
}
My problem is using this code when I clicked 1st li element, this js function add a active class successfully . But this does not work for 2nd, or 4th li element (printing clicked in console).So the codes only working for 1st, 3rd , and 5th li elements. If I double click 2nd or 4th li element then the code working as expected.
All I want to do is after a click change a single li element css class to active or remove active class if there is already existing active class.
Remove onclick attributes from <a>. And don't wrap click inside other function. And also use .color instead of #color
`
$('.color').click(function()
{
if ($(this).hasClass('active')) {
console.log('clicked');
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
});
.active{
color:orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="config-swatch-list">
<li class='color'>
one
</li>
<li class='color'>
two
</li>
<li class='color'>
three
</li>
<li class='color' >
four
</li>
<li class='color'>
five
</li>
</ul>
jQuery.click() vs onClick .. you can still use onclick .. and use toggleClass() for active class instead of add/removeClass
function color_select(el) {
$('.color').removeClass('active').filter(el).toggleClass('active'); // remove active class from the li's and toggle the class for the clicked element
}
.active{
color : red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="config-swatch-list">
<li class='color' onclick="color_select(this);">
Link 1
</li>
<li class='color' onclick="color_select(this);">
Link 2
</li>
<li class='color' onclick="color_select(this);">
Link 3
</li>
<li class='color' onclick="color_select(this);">
Link 4
</li>
<li class='color' onclick="color_select(this);">
Link 5
</li>
</ul>
But to be honest personally I don't prefer to use onclick= using a .click which presented by #Maheer answer is for me much much better
I have toggle tree which responds on click i.e. show or hide UL>li. I want to hide all the UL --> li who has parent ul-li. To make it more obvious I have apply css background-color to red which I want to be hidden by when page loads but show when it click back.
https://jsfiddle.net/toxic_kz/vr84pd6u/
<div>
<ul class="treeview">
<li><a>System Administration</a></li>
<li>
<a>System Core</a>
<ul>
<li><a>f2</a></li>
<li>
<a>f3</a>
<ul>
<li><a>f4</a></li>
<li><a>f5</a></li>
<li><a>f6</a></li>
</ul>
</li>
<li>
<a>f7</a>
<ul>
<li>
<a>f8</a>
<ul>
<li>
<a>f10</a>
<ul>
<li><a>f11</a></li>
</ul>
</li>
</ul>
</li>
<li><a>f9</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a>MyFunctionA</a>
<ul>
<li>
<a>f12</a>
<ul>
<li><a>f13</a></li>
<li><a>f14</a></li>
</ul>
</li>
<li><a>f16</a></li>
</ul>
</li>
<li><a>Course Management</a></li>
</ul>
</div>
jQuery
<script type="text/javascript">
$(document).ready(function () {
$('.treeview li').each(function () {
if ($(this).children('ul').length > 0) {
$(this).addClass('parent');
}
});
// $('.treeview li.parent>ul li').css('display', 'none');
$('.treeview li.parent>ul li').css('background-color', 'red');
$('.treeview li.parent > a').click(function () {
$(this).parent().toggleClass('active');
$(this).parent().children('ul').slideToggle('fast');
});
});
</script>
If I understood your question correctly, this is what you want:
$(".treeview").find('ul').hide()
Place this in your $(document).ready function and it'll hide the underlying unordered list upon page load.
I have ul.menu for which few li are styled differently, therefore those li dont need to add active class.
<ul class="menu">
<li id="1st" class="default">Text1</li>
<li id="2nd" class="default">Text2</li>
<li class="cross-out">Text3</li>
</ul>
jQuery to add active class for first two links, except li.cross-out
$('ul.menu li').click(function(){
$('ul.menu li').removeClass('active');
$(this).not('cross-out').addClass('active');
});
What is wrong? Hope I was clear enough...
You forgot the class identifier before cross-out:
$('ul.menu li').click(function(){
$('ul.menu li').removeClass('active');
$(this).not('.cross-out').addClass('active');
});
The period makes all the difference. Then because you may have several other ul.menu elements on your page, you just want the one whose li was clicked to change:
$('ul.menu li').click(function(){
$(this).siblings('li.active').removeClass('active');
$(this).not('.cross-out').addClass('active');
});
$('ul.menu li').click(function(){
$(this).siblings('li.active').removeClass('active');
$(this).not('.cross-out').addClass('active');
});
.active {
background-color:gray;
font-weight:bolder;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li class="default">Text1</li>
<li class="default">Text2</li>
<li class="cross-out">Text3</li>
</ul>
<ul class="menu">
<li class="default">Text1</li>
<li class="default">Text2</li>
<li class="cross-out">Text3</li>
</ul>
<ul class="menu">
<li class="default">Text1</li>
<li class="default">Text2</li>
<li class="cross-out">Text3</li>
</ul>
Jquery has a toggle class function
$("#td_id").toggleClass('default active');
related post jquery change class name
I have to remove all ul within li except the current li.
<ul>
<li id="Li0">
<ul>
<li><span>Childnode1</span></li></ul>
</li>
<li id="Li1">
<ul>
<li><span>Childnode2</span></li></ul>
</li>
<li id="Li2">
<ul>
<li><span>Childnode3</span></li></ul>
</li>
<li id="Li3">
<ul>
<li><span>Childnode4</span></li></ul>
</li>
<li id="Li4">
<ul>
<li><span>Childnode5</span></li></ul>
</li>
<li id="Li5">
<ul>
<li><span>Childnode6</span></li></ul>
</li>
</ul>
So If i click on the li with id 'li4' every other li that are previous to this li or next to this li should have there ul to be removed from dom.
I was thinking of using the .not operator in jquery but till now not able to do this.
is that what you are searching for?
$(function(){
$('li').click(function(){
$(this).siblings().children("ul").remove();
});
});
Demo: http://jsfiddle.net/wwvBL/
$('li').on('click',function(){
var obj= $(this);
id= obj.attr('id');
obj.parent().find('li:not(#'+id+') > ul').remove();
})
This should help.
$(function () {
$('ul:first').delegate("li[id^='L']", 'click', function () {
$("ul:first > li[id!='"+$(this).attr('id')+"'] > ul").remove();
});
});
Demo: http://jsfiddle.net/EJWnn/
Use siblings to find all other adjacent elements:
$("li").click(function() {
$(this).siblings().find("ul").remove();
});
You might want to have a more specific selector than "li".