I have a simple bit of jQuery which toggles the class "active" to an li once clicked:
$('li').click(function() {
$(this).toggleClass('active');
});
What I then want to happen is have every other li in the list hidden (display: none) then when you click the active li again it removes the active class but sets all other li's to be visible again too. This is what I am struggling to achieve.
I've tried using an if statement within the click function to check if the "active" class exists and if it does setting all li's to hidden, and if it doesn't then setting the css to show them again, but this doesn't work.
Edit:
tilz0R's answer was almost what I was looking for, I just modified it slightly to suit my needs.
$('li').click(function() {
$(this).toggleClass('active').siblings().toggleClass('hidden');
});
The hidden class simply has display: none, so that all other li's are hidden apart from the one that was clicked, and then all are shown again on the second click of the active li.
You have to find siblings of current li element.
$('li').click(function() {
$(this).toggleClass('active').siblings().hide();
});
Simply use addClass, removeClass and show() / hide()
$('li').click(function() {
if ($(this).hasClass('active')) {
$('li').show();
$(this).removeClass('active');
} else {
$('li').hide();
$(this).addClass('active').show();
}
});
li {
cursor: pointer;
}
.active {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ol>
When you click any <li> tag, the all <li> tag will be hidden except selected <li>. And again click, then all <li> tag will show and remove the active class.
HTML:
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
<li>forth</li>
</ul>
jQuery:
jQuery('ul li').click(function() {
if(jQuery(this).hasClass('active')) {
jQuery(this).removeClass('active');
jQuery('ul li:not(".active")').show();
} else {
jQuery('ul li').removeClass('active');
jQuery(this).addClass('active');
jQuery('ul li:not(".active")').hide();
}
});
Related
This question already has answers here:
on click clone the li and show in a div
(2 answers)
Closed 9 months ago.
on click clone li with add it under li with a class clicked and on click on different li the previous clone should get removed
for eg: what i would like to achieve is on the click of <li><span>third</span></li> clone same li under ul with a class "clicked" <li class="clicked"><span>third</span></li> && when i click on other li like <li><h4>Fourth</h4></li> the old li with class clicked should get removed and new li of <li class="clicked"><h4>Fourth</h4></li> should get generated
$('li').click(function() {
$(this).each(function(i) {
$("<li>")
.append($(this).contents().clone())
.appendTo('#main-ul');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>
<ul id="main-ul">
<li>First</li>
<li><div>Second</div></li>
<li><span>third</span></li>
<li><h4>Fourth</h4></li>
</ul>
This code is work for you if I understand what you want.
<script>
$('li').click(function() {
$(".clicked").remove();
$('li').each(function(){
if($(this).children().length==0)
{
$(this).remove();
}
})
$(this).each(function(i) {
$("<li>")
.append($(this).contents().clone().addClass("clicked"))
.appendTo('#main-ul');
});
});
</script>
When you clone the element into the ul (the same, but doesn't matter), give it the clicked class with .addClass at the same time.
You can then remove all the ".clicked" elements when you add your next entry.
$('li').click(function() {
// remove previous entry (does nothing if none)
$(".clicked").remove();
// add new entry with class
$(this)
.clone()
.addClass("clicked")
.appendTo('#main-ul');
});
.clicked { color: red; }
ul#main-ul > li { cursor: pointer; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>
<ul id="main-ul">
<li>First</li>
<li><div>Second</div></li>
<li><span>third</span></li>
<li><h4>Fourth</h4></li>
</ul>
$('.active').click(function() {
$(this).toggleClass('active');
$(this).toggleClass('active');
});
I know this is totally wrong but I'm new and trying to learn; What I'm trying to do is toggle the active class for the <li> onclick() really appreciate any help. Thankyou.
<ul class="nav nav-tabs">
<li role="presentation" onclick="toggleClass();">Hi</li>
</ul>
You need to create a function toggleClass
JS
Create a new function toggleClass which will accept the current clicked element
function toggleClass(elem) {
$(elem).toggleClass('active');
};
HTML
add toggleClass function to onclick handler & pass the current element as an argument
<li role="presentation" onclick="toggleClass(this);">Hi</li>
CSS
Create a class .active
.active {
background: yellow;
}
DEMO
What you need to do is set all other elements's classes to inactive,
$('.active').className = 'inactive';
$(this).className = 'active';
That top expression will affect all elements with the class and the bottom one will change the current clicked element.
try this:
$("nav li").click(function() {
$(this).toggleClass("active");
});
if only for <li> elements with active class
$("nav li.active").click(function() {
$(this).toggleClass("active");
});
This is not how Bootstrap is supposed to work. If you are using bootstrap, use their tab js component. more on it here
Basically you add a listener on those LI tags like this: (from the docs)
$('.nav.nav-tabs li').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
The way you did, you were toggling the state twice so in the end it would stay the same.
I think instead of $('.active').click(function()), you should target li click as
$( "li" ).click(function() {
$(this).toggleClass("active");
});
fiddle:
http://jsfiddle.net/wVVbT/142/
Here is a link for description about how to use .toggleClass.
toggleClass: Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.
DEMO:
$('li').click(function() {
$(this).toggleClass('active');
})
ul li{
float: left;
margin-right: 20px;
}
.active {
background: #69a;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li> Link A</li>
<li>Link B</li>
</ul>
i have this HTML code
<ul>
<li>test1
<div class="sub-menu">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</li>
<li>test2</li>
<li>test3</li>
<li>test4
<div class="sub-menu">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</div>
</li>
</ul>
that div.sub-menu has hidden in css.
i want when hover in a find div that inside in parent li and show it,
i try in jquery but when hover in a tag show two sub-menu div,
i want when hover in test1 show div.sub-menu that have 1,2,3,4
and when hover in test4 show div.sub-menu that have a,b,c,d
You can attach a handler for the mouseenter and mouseleave events that manipulates the associated sub-menu, for example like this:
$(document)
.on("mouseenter", "ul > li > a", function() {
$(this).siblings(".sub-menu").show();
})
.on("mouseleave", "ul > li", function() {
$(this).children("a").next(".sub-menu").hide();
});
This snippet installs delegated event handlers that show and hide the sub-menus -- note that the "hide" trigger is different from the "show" trigger because we don't want the menu to disappear as soon as the mouse pointer moves off the anchor. See it in action.
However depending on the desired result you might also be able to do this with pure CSS, e.g.
ul > li > a + .sub-menu { display: none }
ul > li:hover > a + .sub-menu { display: inline-block }
See it in action.
Both versions are structured so that they work also for nested sub-menus.
Simply hide/show the sub-menu on mouseover/mouseout:
Javascript
$("li").mouseover(function(){
$("ul", this).show();
});
$("li").mouseout(function(){
$("ul", this).hide();
});
JS Fiddle: http://jsfiddle.net/EDufY/
If You want to display menu on hover effect of li then i think u don't need javascript.
if u change css then it is posiible.
write your css like.
.sub-menu
{
display:none;
}
li:hover .sub-menu
{
display:block
}
And you have multilevel menu then give them id and repate above procedure
Try this with slide effect, http://jsfiddle.net/SmtQf/1/
$(function () {
$('ul li').hover(
function () {
$('.sub-menu', this).stop(true, true).slideDown(); /*slideDown the subitems on mouseover*/
}, function () {
$('.sub-menu', this).stop(true, true).slideUp(); /*slideUp the subitems on mouseout*/
});
});
I created a vertical menu using unordered list. Within the list, there are subitems that are not displayed until a click event. How do I get a reference to the first ul child element of an li element to change its display style from "none" to ""?
When I click on mnu03, how do I get a reference to mnu031. Right now I'm just adding a "1" to the parent id to create the id of the child, which is kludgy.
I don't want to use jQuery.
The markup follow:
<pre>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ul id="mnu031" style="display:none;" >
<li>Item S1</li>
<li>Item S2</li>
</ul>
</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</pre>
In your JavaScript code where you bind to the click:
this.parentElement.querySelector('ul').style.display = 'block';
http://jsfiddle.net/CDXH5/
You have some mismatched quotes in your html, by the way.
assign a class to your li element.
window.onload=function() {
var obj=document.getElementsByClassName('x');
for(var i=0;i<obj.length;i++)
{
obj[i].addEventListener("click", function() {
for(var i=0;i< this.childElementCount ;i++ )
{
// write ur code here this.children[i] is your reference
}
});
}
}
Using CSS sibling selectors for styling only the first of it's class. The following selects only the first ul under an li
li > ul {}
There are other sibling type selectors that may you want to try out.
The descendant selector
The adjacent sibling combinator
The general sibling combinator.
The Descendant Selector:
This is styling any list items that are anywhere underneath an unordered list.
ul li{}
Adjacent Sibling Combinator:
p + p { font-size: smaller; } /* Selects all paragraphs that directly follow another paragraph */
The child combinator selector: Selecting tags that are strictly direct children of <p> tags in your markup.
p > img
Not sure if this is what you're looking for but it's what I would use if it must be JS free.
css-tricks.com
I have a list inside a li which needs to slide into view when the parent li is clicked.
My code works nicely but if i click any li all of the sub lists show where as i want it only to apply to the one that was clicked...
$("#offering li").click(function() {
$("#offering li ul").animate({height: "toggle"}, 1000);
});
<ul id="offering">
<li class="t current"><span>sage solutions</span>
<ul>
<li>50</li>
<li>200</li>
<li>CRM</li>
</ul>
</li>
<li class="m"><span>solutions</span>
<ul>
<li>50</li>
<li>200</li>
<li>CRM</li>
</ul>
</li>
<li class="b"><span>third party additions</span></li>
</ul>
$(this).find("ul").animate({height: "toggle"}, 1000);
Here you are applying the animation to all elements that match the selector #offering ul li, when infact you just need to apply it to the child ul of the li clicked.
Instead of the following
$("#offering li").click(function() {
$("#offering li ul").animate({height: "toggle"}, 1000);
});
Try this
$("#offering li").click(function() {
this.childNodes[0].animate({height:"toggle"},1000);
});
I'm not as familiar with jQuery as I am with Mootools, so there may be a more appropriate way to get the child ul element than using the childNodes array - but you get the idea.