Develop Reference

Jquery UI sortable widget has divider among sortable item

I have a sortable list like the above image, each sortable element has a icon between them.
The current code in jquery UI sortable is like this:
<ul class="sortable_panel">
<li></li>
<i class="icon"></i>
<li></li>
<i class="icon"></i>
<li></li>
</ul>
Javascript:
$('.sortable_panel').sortable({
items: "> li"
});
The problem are , how to
1) make the icon not sortable
2) if the first item is drag to last item, how to make the second item become the first item and above the icon?
Thanks a lot for helping.
JSfiddle: https://jsfiddle.net/cqx0ask6/

Move each icon inside <li> as anyway <ul> should not contain
<i> elements directly by HTML spec.
See the above , it will fix your #2 issue too.

Keep container open for first click of each nav item

I'm trying to figure out how I can do this -- I need to keep one container open through a click of a sibling list item, but then close it on the second click. The issue is going back to another link and having a handler left on it.
The concept would be to have:
<ul id="nav">
<li>Nav Item Two</li>
<li>Nav Item Three</li>
<li>Nav Item Four</li>
</ul>
<div id="nav-content">
<!-- Content changed with Ajax -->
</div>
Using this, I'm interchanging the content with ajax, so a click returns it into my "nav-content" div. When I click on one item, I want the content div to open, and then remain open when the next nav item link is clicked, but closed when it's clicked a second time.
Tried using unbind but I don't think that's appropriate, and it didn't work. Any ideas?

You can do this by:
giving the li a class when you click it
removing that class from all other lis
then checking for that class before you hide or show your div
Essentially using a class to keep up with which li was clicked last
$('#nav li').click(function(){
// remove the `active` cass form all `li`s in `#nav`
// except the one that was clicked
$('#nav li').not(this).each(function(){
$(this).removeClass('active');
});
// check if clicked element has `active` class
// if so it was just clicked for second time, close the div
if( $(this).hasClass('active') ){
$(this).removeClass('active');
$('#nav-content').hide();
}
else{
// if not it was clicked for the first time
// show the div and make the clicked element `active`
$(this).addClass('active');
$('#nav-content').show();
}
});
#nav-content{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav">
<li>Nav Item Two</li>
<li>Nav Item Three</li>
<li>Nav Item Four</li>
</ul>
<div id="nav-content">
<!-- Content changed with Ajax -->
Here is some content
</div>

Add a list under an <li> when clicking that <li>

I am trying to create a nested list. When clicking on an <li> an unordered list should be appended to the <li> that was clicked on.
After clicking the first <li> my code fails and does not append lists to the newly inserted <li>. I would like add the unordered list to the any <li> that is in the list.
Here is a fiddle: http://jsfiddle.net/s9204kyh/
Here is my JavaScript:
$('li').on('click', function() {
var html = '<ul><li>Click to add a nested list item</li></ul>';
$(this).append(html);
});
Here is my HTML:
<div class="container">
<ul>
<li class="click">Click to add a nested list item</li>
</ul>
</div>

Here's one way. I'm not sure if it's exactly what you need.
You can delegate the event handling to the .container, and check some criteria to see if the <li> is appropriate for appending a new list. In my example, a new list is only appended if the clicked <li> does not already container a <ul> tag.
JS (jQuery):
var html = '<ul><li>Click to add a nested list item</li></ul>';
$('.container').on('click', 'li', function(e) {
$(e.target).filter(':not(:has(ul))').append(html);
});
Here's a fiddle.

Thanks to Mike'Pomax'Kamermans for pointing to the flaw in my original code.
Here is the JavaScript I was looking for:
$('li').on('click', function(e) {
var html = '<ul><li>Click to add a nested list item</li></ul>';
$(e.target).append(html);
});

I need a help for you.
JS with JQuery
var addNestedListItem = function(ev) {
var html = '<ul><li>Click to add a nested list item</li></ul>';
$(ev.target).parent().append(html);
$('li').off('click').on('click', addNestedListItem);
};
$('li').on('click', addNestedListItem);
HTML
<div class="container">
<ul>
<li class="click">Click to add a nested list item</li>
</ul>
</div>
jsfiddle : http://jsfiddle.net/vfb8yare/

hovering over list item, only one item showing up instead of all

HI I am trying to make a menu where items show up as they hover. I am quite new to jquery, css, etc. and I cant quite figure out what my problem is. Right now I do get my div to show up on hover, but instead of just one all of them show up.
How do I make the div tag of only the item I hover over show up.
Here is the fiddle:
<ul class="navi">
<li> <a class='light'>
Item1
<div class="hover-name" style="display:none">
Businesses
</div>
</a>
</li>
<li> <a class='light'>
Item2
<div class="hover-name" style="display:none">
Agencies
</div>
</a>
</li>
<li> <a class='light'>
Item3
<div class="hover-name" style="display:none">
Billing Plans
</div>
</a>
</li>
</ul>
http://jsfiddle.net/Samfr/
For example if I hover over Item1 then only Businesses would show up. Item2 only Agencies show up
Thank you

You are using the following to show the items:
$('.hover-name').show();
What this does is find everything within the doucment that has a class of .hover-name and does the show() function on it.
All you need to do is change the show line to be context aware:
$(this).find('.hover-name').show();
Using $(this).find('.hover-name') will find all the elements inside of what you hovered over with a class of .hover-name and show that, instead of showing all of them.
Additionally, if you wanted to hide the shown elements when you move over a new element, you could use the following:
$('.navi > li a.light').hover(function () {
$('.hover-name').hide();
$(this).find('.hover-name').show();
});
$('.hover-name').hide(); will hide everything with the class of .hover-name and then show the items inside the element you are currently over.

This code is going to hide the other elements:
$('.navi > li a.light').hover(function () {
$(this).parent().parent().find('.hover-name').hide();
$(this).find('.hover-name').show();
});
Fiddle

You can use the currentTarget of the event, which will return the element that was hovered, and you can use that to filter to only show the hover-name of that element:
$('.navi > li a.light').hover(function (e) {
$(e.currentTarget).find('.hover-name').show();
});
(http://jsfiddle.net/Samfr/4/)

click on one item, add and remove classes from other items

I have the following HTML:
<ul>
<li class="one">one</li>
<li class="two">two</li>
<li class="three">three</li>
</ul>
<div class="one">
Here's div one
</div>
<div class="two">
Here's div two
</div>
<div class="three">
Here's div three
</div>
<div class="one">
Here's another div one, just for kicks
</div>
Here's what I want to do: when you click on the li class="one", I want to add an "active" class to all divs with class="one". Then when you click on li class="two", it removes the "active" from the first div and puts it on div class="two". I've played around with a few different ways of doing this, but I'm having trouble coming up with an efficient way to do it for all lis and divs (there will eventually be 10 of them).

$('ul a').on('click',function(){
$('.active').removeClass('active');
$('div.'+$(this).text()).addClass('active');
});
Demo: http://jsfiddle.net/9RLa9/
Alternatively, if you want to use the parent class instead of the text of the link to trigger your changes:
$('ul li').on('click',function(){
$('.active').removeClass('active');
$('div.'+$(this).attr('class')).addClass('active');
});