Develop Reference

select elements by condition using jquery

I am having a ul with li and <i> tag as children. The code is as below
<li class="accordion put">
<span><i class="fa fa-plus-circle"></i></span><span style="padding-left:5px;font-size: 18px;">Topic-Heading</span>
<ul class="panel2" style="display: none;">
<li class="testing"><i class="fa fa-chevron-right"></i> section 1</li>
<li class="testing"><i class="fa fa-chevron-right"></i> section 2 </li>
<li class="testing"><i class="fa fa-chevron-right"></i> section 3</li>
<li class="testing"><i class="fa fa-chevron-right"></i> section 4 </li>
</ul>
</li>
I have the below jquery code to toggle the class on click on the li as shown below:
$(".put.accordion" ).click(function() {
$(this).children("ul").toggle("slow");
$(this).find("i").toggleClass("fa-plus-circle fa-minus-circle");
});
The above code is working fine when I click on the li tag but since I have mentioned find('i') both the i tags are changing. I need to toggle only the i element having the class as fa-plus-circle and to ignore the i with class fa-chevron-right.
Please let me know where I am going wrong.

If you want a class independent way of selecting the first <i>, you can use .first() to reduce the matched results to the first returned <i> only.
In your case you could replace this line:
$(this).find("i").toggleClass("fa-plus-circle fa-minus-circle");
With this:
$(this).find("i").first().toggleClass("fa-plus-circle fa-minus-circle");
A generic example:
$('body').on('click', function() {
console.log( $(this).find('i').first().text() )
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click anywhere to return the contents of the first <code><i></code>.</p>
<i class="first">First</i>
<i class="second">Second</i>
<i class="third">Third</i>

You can use the same syntax in find() as with other jQuery selectors. Just specify the class:
$(".put.accordion" ).click(function() {
$(this).children("ul").toggle("slow");
$(this).find("i.fa-plus-circle i.fa-minus-circle").toggleClass("fa-plus-circle fa-minus-circle");
});

You can find with :
find("i[class=fa-plus-circle]")
Detail in : https://www.w3schools.com/cssref/css_selectors.asp. hope to help you

Javascript code for Bootstrap Sidebar menu not working

I have a Sidebar / Menu that I am working with. It has been created with Bootstrap, DJango, and Javascript.
Basically, I am trying to write Javascript so that when on clicks on a menu-item, the background changes color (dark blue), the icon change color (light green / turquoise) and it gets a type of "wedge"
Below is an example of a menu-item that has been chosen (Dashboard) along with menu-items that have not been chosen (Security and Messages). The "wedge" has a red arrow pointing to it.
Here is the HTML code that is being used:
[... snip ...]
<div class="page-container">
<div class="page-sidebar-wrapper">
<div class="page-sidebar navbar-collapse collapse">
<ul class="page-sidebar-menu page-header-fixed page-sidebar-menu-hover-submenu "
data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
<li class="nav-item start active open">
<a href="{% url 'mainadmin:dashboard' %}" class="nav-link nav-toggle">
<i class="fa fa-tachometer"></i>
<span class="title">Dashboard</span>
<span class="selected"></span>
<span class="arrow open"></span>
</a>
</li>
<li class="nav-item ">
<a href="{% url 'mainadmin:security' %}" class="nav-link nav-toggle">
<i class="fa fa-users"></i>
<span class="title">Security</span>
<span class="arrow"></span>
</a>
</li>
<li class="nav-item ">
<a href="{% url 'mainadmin:in_progress' %}" class="nav-link nav-toggle">
<i class="fa fa-comment"></i>
<span class="title">Messages</span>
<span class="arrow"></span>
</a>
<ul class="sub-menu">
<li class="nav-item ">
<a href="{% url 'mainadmin:in_progress' %}" class="nav-link ">
<span class="title">List All Messages</span>
</a>
</li>
<li class="nav-item ">
<a href="{% url 'mainadmin:in_progress' %}" class="nav-link ">
<span class="title">List My Messages</span>
<span class="badge badge-danger"></span>
</a>
</li>
</ul>
</li>
[... snip ...]
Here is the Javascript code:
<script>
$(document).ready(function () {
$('.nav-item a').click(function(e) {
$('.nav-item a').removeClass('selected');
$('.nav-item a').removeClass('arrow');
$('.nav-item a').removeClass('open');
$('.nav-item a').removeClass('active');
alert("I have gotten in");
var $parent = $(this).parent();
$parent.addClass('selected');
$parent.addClass('arrow');
$parent.addClass('open');
$parent.addClass('active');
e.preventDefault();
});
});
</script>
I do get the alert message - but - what happens is :
-> the background of the chosen menu-item does change color - which is correct
--> The icon of the chosen menu-item changes color (to light blue / turquoise) - which is correct
-> the tick of the arrow does not take place for the chosen menu-item :(
-> the old chosen menu item does not "de-select"
What am I doing wrong?
TIA
Hi #Joe Lissner
Thanks so much for the response!
I had to add the following to get the "wedge" portion to work. It required span tags
// REFERENCE: https://stackoverflow.com/questions/2013710/add-span-tag-within-anchor-in-jquery
$(this).append('<span class="selected"></span>');
$(this).append('<span class="arrow open"></span>');
While this works when clicking on the main-menu item, I'm not so lucky when it comes to clicking on sub-menu items. As of now, I am pretty much new to Javascript.
How would one get the sub-menu items to work?
Also, when clicking on an item, it does not go to the page specified in "href="
How would can one make changes to the code so that when the menu-item is clicked, it would go to the page specified in "href="
Again, thanks for the response :-)

You are removing the classes from the a tags, not the .nav-item elements.
Try this:
$(document).ready(function () {
$('.nav-item a').click(function(e) {
e.preventDefault(); // best practice to have this first, if you remove this line then the link will function as expected.
var $parent = $(this).parent();
var $arrow = $parent.find('.arrow');
$('.nav-item').removeClass('selected arrow open active'); // simplified
$('.nav-item .arrow').removeClass('open');
$('.nav-item .selected').detach(); // remove the span that was there before
alert("I have gotten in");
$parent.addClass('open active'); // simplified
$arrow.addClass('open').before('<span class="selected" />')
});
});
Edit - Fixed the issue with the arrow

Bootstrap dropdown on hover not working, what am I doing wrong?

I am trying to open a dropdown on hover in Bootstrap but somehow it's not working. I suspect that my jQuery code is wrong but I can't figure out what?
Here is my HTML:
<a href="#" id="dropdown-filter" data-target="#" data-toggle="dropdown">
<button type="button" class="btn btn-primary">Filters</button>
</a>
<ul class="dropdown-menu pull-right" role="menu">
<li>
<div class="results-filter">
Content goes here
</div>
</li>
</ul>
and my jQuery:
jQuery('#dropdown-filter').hover(function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn();
}, function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(100).fadeOut();
});
It works when I click on top, but not when I hover.

jQuery(this).find('.dropdown-menu') won't work here as .dropdown-menu is not a child of <a>-#dropdown-filter.
.find() searches for children.
Use jQuery(this).next('.dropdown-menu')...

How to change css class from javascript?

Suppose I want to dynamically via javascript or jquery change the class of the following to class="active" How do I achieve it?
<!-- Navigator -->
<div style="position: abolute; top: 50px" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul id="yw0" class="nav">
<li class="active">Company</li>
<li><i class="fa fa-lightbulb-o"></i>&nbspFAQs</li>
<li><i class="fa fa-question-circle"></i>&nbspHelp Center</li>
<li><i class="fa fa-newspaper-o"></i>&nbspPress</li>
<li>Careers</li>
<li><i class="fa fa-envelope-o"></i>&nbspContact Us</li>
</ul>
</div>
</div>
</div>
I want to actually know how can I change the class of the li tag?
<li class="active">
I know that there is a method that I can use http://api.jquery.com/addclass/
But how do I do it with my example above.

For Adding class in any HTML Element
$("#id_of_element, .class_of_element, directly_name_of_element").addClass('active');
For Removing class from any HTML Element
$("#id_of_element, .class_of_element, directly_name_of_element").removeClass('active');

If i understand your expected behaviour, you could delegate event to UL element for using following logic on LI click:
$("#yw0").on('click', 'li:not(.active)', function () {
$(this).add('li.active').toggleClass('active');
});
-DEMO-
$(function () {
$("#yw0").on('click', 'li:not(.active)', function () {
$(this).add('li.active').toggleClass('active');
});
});
li.active {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="position: abolute; top: 50px" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul id="yw0" class="nav">
<li class="active">Company
</li>
<li><i class="fa fa-lightbulb-o"></i>&nbspFAQs
</li>
<li><i class="fa fa-question-circle"></i>&nbspHelp Center
</li>
<li><i class="fa fa-newspaper-o"></i>&nbspPress
</li>
<li>Careers
</li>
<li><i class="fa fa-envelope-o"></i>&nbspContact Us
</li>
</ul>
</div>
</div>
</div>

http://api.jquery.com/addclass/
In JQuery.
$("li").addClass("active");
You will need a better selector for getting the li you require.

$("li").addClass("active");
And in your CSS just have
.active {
background: red;
}
Although your best bet is to know which is active and just append that class to the li tag on the respective page, assuming you're talking about navigation: for example, on your help-center.html, just add
<li class="active"> rather than <li>

You can add classes easily with jquery using add class, and remove with, yep you guessed it, remove class
If you want to change a class, simple remove the old one and add the new
$('#something').removeClass.('oldClass').addClass('newClass');
N.b. links are to jquery docs

Below code will add the class to the last li..
$(document.ready(function() {
$('.container li:last-child').addClass('active');
});

To select an item by class:
$('.active').addClass('.non-active');
$('.active').removeClass('.active');
To select an item by type:
$('li').addClass('.non-active');
$('ii').removeClass('.active');
To select an item by id:
$('#some_id').addClass('.non-active');
$('#some_id').removeClass('.active');

Selecting Closest Match using jQuery

I am having trouble selecting the closest match. I already tried .closest, .next, and .nextall; I also tried using (this), but I think I'm using them incorrectly.
Here's what I want to acheive:
When .show is clicked, the closest .list-content will toggle and the closest toggleClass icon-rotate-180 too.
<ul class="list-unstyled">
<li class="list-menu">
<a href="javascript:void(0);" class="show">
Date of Operations
<i class="icon-chevron-down pull-right"></i>
</a>
</li>
<li class="list-content">Hidden Content until Clicked</li>
<li class="list-menu">
<a href="javascript:void(0);" class="show">
Date of Operations
<i class="icon-chevron-down pull-right"></i>
</a>
</li>
<li class="list-content">Hidden Content until Clicked</li>
</ul>
<script>
$(document).ready(function() {
$(".list-content").hide();
$(".show").click(function() {
$(".icon-chevron-down").toggleClass("icon-rotate-180");
$(".list-content").toggle();
});
});
</script>

Firstly, your HTML is invalid as you cannot have a div element as a direct child of a ul. With that in mind, try this:
<ul class="list-unstyled">
<li class="list-menu">
<a href="#" class="show">
Date of Operations
<i class="icon-chevron-down pull-right"></i>
</a>
<div class="list-content">Hidden Content until Clicked</div>
</li>
<li class="list-menu">
<a href="#" class="show">
Date of Operations
<i class="icon-chevron-down pull-right"></i>
</a>
<div class="list-content">Hidden Content until Clicked</div>
</li>
</ul>
$(".show").click(function(e) {
e.preventDefault();
$(".icon-chevron-down", this).toggleClass("icon-rotate-180");
$(".list-content", $(this).closest('li')).toggle();
});

ul/li is the wrong case here. The second li is in relation to the first li. Please use dl, dd and dt instead - this is not the perfect match but better than ul/li!
a is for links but you dont call a url. Please use the dd itself or a span so you dont need the javascript:void(0); and no e.preventDefault();.
Date of Operations
Hidden Content until Clicked
<dd class="list-menu show">
Date of Operations
<i class="icon-chevron-down pull-right"></i>
</dd>
<dt class="list-content">Hidden Content until Clicked</dt>
$(".show").click(function(e) {
$(this).closest(".icon-chevron-down").toggleClass("icon-rotate-180");
$(this).next("dt.list-content").toggle();
});
(i copied a part of RoyMcCrossan's answer from Selecting Closest Match using jQuery)
Sorry structure broken, looks like a bug in Stackoverflow.