We Keep Coding

How to limit nested list <li> to only two levels in Jquery Sortable?

I am using sortable jquery plugin to create a nested list menu items dragged and dropped from left container to right container.
Each item from left container, I allow one level nested. However, in the right container, I don't want it to be nested more than two levels nested.
function Menu_init() {
// alert('Menu_init');
var oldContainer;
$("ol.example").sortable({
group: 'nested',
exclude: '.unsortable', // exclude module description from being drage droped
afterMove: function(placeholder, container) {
if (oldContainer != container) {
if (oldContainer)
oldContainer.el.removeClass("active");
container.el.addClass("active");
oldContainer = container;
}
},
onDrop: function($item, container, _super) {
container.el.removeClass("active");
_super($item, container);
li = $item;
// console.log(li.children().children().length);
var children = li.children().children();
var child;
var numOfChildren = children.length;
containerID = container.target[0].id;
if (containerID !== 'myUL') {
if (numOfChildren == 1) {
li.children('a').css({
'visibility': 'visible'
});
} else {
for (var element in children) {
child = children[element].nodeName;
if (child == 'LI') {
$(children[element]).find('a').css('visibility', 'visible');
} else if (child == 'A') {
$(children[element]).css('visibility', 'visible');
}
}
}
} else {
li.children('a').css('visibility', 'hidden');
}
}
});
// init filter
// itemFilter("myInput","myUL");
}
$(function() {
Menu_init();
})
div#icon-picker {
margin-top: 20px;
height: 300px !important;
width: 330px !important;
overflow: scroll;
}
div#icon-picker i {
display: inline-block;
padding: 5px;
}
div#icon-picker i:hover {
background: #ccc;
cursor: pointer;
}
body.dragging,
body.dragging *,
.dragged {
cursor: grabbing !important;
cursor: -webkit-grabbing !important;
}
ol.forms,
ol.forms ol,
ol.example2,
ol.example2 ol {
padding-left: 0 !important;
}
ol.forms li,
ol.example2 li {
display: block;
margin: 10px 5px;
padding: 11px;
border: 1px solid #cccccc;
color: #0088cc;
background: #eeeeee;
}
ol.example li a,
ol.example2 i {
font-size: 15px !important;
}
ol.form li>a,
ol.example2 li>a {
line-height: 0px;
margin-top: 15px;
font-size: 16px padding: 15px;
}
ol.example2 li:last-child {
margin-bottom: 10px;
}
li:hover {
cursor: grab !important;
cursor: -webkit-grab !important;
}
li>i {
padding: 4px 7px !important;
}
ol ol {
background: #eeeeee;
}
.dragged {
opacity: 0.5;
}
ol.example li.placeholder {
position: relative;
border: 3px dashed red;
opacity: 0.5;
}
ol.example li.placeholder:before {
/*position: absolute;*/
/* Define arrowhead*/
}
ol.example {
border: 1px solid #ccc;
}
.popover {
height: 400px;
overflow-y: scroll;
}
li>i {
padding: 15px;
cursor: pointer;
}
li .popover {
cursor: pointer;
}
li .popover i {
padding: 10px;
}
li .popover i:hover {
background: #CCC;
}
i.move_right {
visibility: hidden;
}
ol.forms li:hover>i.move_right {
visibility: visible;
animation-name: move-right;
animation-delay: 0s;
animation-duration: 1s;
/*animation-iteration-count: infinite;*/
/*animation-dir*/
}
.opts {
position: absolute;
left: 150px;
top: 0px;
z-index: 1000000000;
list-style-type: none;
/*background: #FFF;*/
}
button.saveChange {
position: absolute;
z-index: 1000000000;
top: 44px;
}
.opts li {
padding: 15px;
background: rgba(0, 0, 0, .8);
}
.bckg {
background: rgba(0, 0, 0, .6);
}
ol.example2>li[data-act='N'] {
text-decoration: underline;
}
/* search box inside select2*/
input.select2-input {
margin: 12px 0 8px 0 !important;
}
div[id^="target"]:not(#target1) {
display: none;
}
/* here to set height and auto scroll for both container*/
ol#myUL,
ol.example {
height: 600px !important;
overflow: scroll;
}
/*div.newMenu{ border: 1 solid black; }*/
ol.example2>li:last-child {
margin-bottom: 30px;
}
div.iconPopover {
top: 0px !important;
}
.modal {
background-color: transparent !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://johnny.github.io/jquery-sortable/js/jquery-sortable.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
<form class="form-horizontal">
<session id="MenuList">
<div class="container">
<dir class="row">
<div class="col-xs-6">
<h4 class="center">List Available Menu</h4>
<ol class="example forms" id="myUL">
<li>
<i class=""></i>Customer
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol>
<li>
<i class=""></i>Customer A
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Customer B
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Customer C
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
</ol>
</li>
<li>
<i class=""></i>Teller
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol>
<li>
<i class=""></i>Till Open
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Till Close
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Cash Deposit
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Cash Withdrawal
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Till to Till Transfer
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Income Posting
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Expense Posting
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
</ol>
</li>
</ol>
</div>
<div class="col-xs-6">
<h4 class="center">List Available Menu</h4>
<div class="newMenu">
<ol class="example example2 sortable">
</ol>
</div>
</div>
</dir>
</div>
</session>
</form>
</div>
I really have no idea how can I check the nested level of item when it is dragged to from the left container to the right container. I just know the algorithm that if the items already has nested level 2, then I just simply remove <ol></ol> inside the <li>...</li> and append it back if it is in zero or one level nested.
Here to demonstrate what I want it to be and not to be:
Correct nested level which has only 2 levels nested item
Incorrect nested level which has more than 2 levels nested and which I want to set limit to it
Please kindly help me how can I do to check nested level and set limit to it? Thanks.

Since there is no one help answering on this, I would like to share what I have found on this.
The dept item for measuring and set limit for nested item option is something considered for adding into Jquery-sortable by the author, here reference.
Although it is not yet an option, there is an alternative add-on to the built-in method isValidTarget set fourth with plugin:
isValidTarget: function ($item, container) {
var depth = 1, // Start with a depth of one (the element itself)
maxDepth = 2, // *** 3 for my case
children = $item.find('ol').first().find('li');
// Add the amount of parents to the depth
depth += container.el.parents('ol').length;
// Increment the depth for each time a child
while (children.length) {
depth++;
children = children.find('ol').first().find('li');
}
return depth <= maxDepth;
}
function Menu_init() {
// alert('Menu_init');
var oldContainer;
$("ol.example").sortable({
group: 'nested',
exclude: '.unsortable', // exclude module description from being drage droped
afterMove: function(placeholder, container) {
if (oldContainer != container) {
if (oldContainer)
oldContainer.el.removeClass("active");
container.el.addClass("active");
oldContainer = container;
}
},
isValidTarget: function($item, container) {
var depth = 1, // Start with a depth of one (the element itself)
maxDepth = 3, // *** 3 for my case
children = $item.find('ol').first().find('li');
// Add the amount of parents to the depth
depth += container.el.parents('ol').length;
// Increment the depth for each time a child
while (children.length) {
depth++;
children = children.find('ol').first().find('li');
}
return depth <= maxDepth;
},
onDrop: function($item, container, _super) {
container.el.removeClass("active");
_super($item, container);
li = $item;
// console.log(li.children().children().length);
var children = li.children().children();
var child;
var numOfChildren = children.length;
containerID = container.target[0].id;
if (containerID !== 'myUL') {
if (numOfChildren == 1) {
li.children('a').css({
'visibility': 'visible'
});
} else {
for (var element in children) {
child = children[element].nodeName;
if (child == 'LI') {
$(children[element]).find('a').css('visibility', 'visible');
} else if (child == 'A') {
$(children[element]).css('visibility', 'visible');
}
}
}
} else {
li.children('a').css('visibility', 'hidden');
}
}
});
// init filter
// itemFilter("myInput","myUL");
}
$(function() {
Menu_init();
})
div#icon-picker {
margin-top: 20px;
height: 300px !important;
width: 330px !important;
overflow: scroll;
}
div#icon-picker i {
display: inline-block;
padding: 5px;
}
div#icon-picker i:hover {
background: #ccc;
cursor: pointer;
}
body.dragging,
body.dragging *,
.dragged {
cursor: grabbing !important;
cursor: -webkit-grabbing !important;
}
ol.forms,
ol.forms ol,
ol.example2,
ol.example2 ol {
padding-left: 0 !important;
}
ol.forms li,
ol.example2 li {
display: block;
margin: 10px 5px;
padding: 11px;
border: 1px solid #cccccc;
color: #0088cc;
background: #eeeeee;
}
ol.example li a,
ol.example2 i {
font-size: 15px !important;
}
ol.form li>a,
ol.example2 li>a {
line-height: 0px;
margin-top: 15px;
font-size: 16px padding: 15px;
}
ol.example2 li:last-child {
margin-bottom: 10px;
}
li:hover {
cursor: grab !important;
cursor: -webkit-grab !important;
}
li>i {
padding: 4px 7px !important;
}
ol ol {
background: #eeeeee;
}
.dragged {
opacity: 0.5;
}
ol.example li.placeholder {
position: relative;
border: 3px dashed red;
opacity: 0.5;
}
ol.example li.placeholder:before {
/*position: absolute;*/
/* Define arrowhead*/
}
ol.example {
border: 1px solid #ccc;
}
.popover {
height: 400px;
overflow-y: scroll;
}
li>i {
padding: 15px;
cursor: pointer;
}
li .popover {
cursor: pointer;
}
li .popover i {
padding: 10px;
}
li .popover i:hover {
background: #CCC;
}
i.move_right {
visibility: hidden;
}
ol.forms li:hover>i.move_right {
visibility: visible;
animation-name: move-right;
animation-delay: 0s;
animation-duration: 1s;
/*animation-iteration-count: infinite;*/
/*animation-dir*/
}
.opts {
position: absolute;
left: 150px;
top: 0px;
z-index: 1000000000;
list-style-type: none;
/*background: #FFF;*/
}
button.saveChange {
position: absolute;
z-index: 1000000000;
top: 44px;
}
.opts li {
padding: 15px;
background: rgba(0, 0, 0, .8);
}
.bckg {
background: rgba(0, 0, 0, .6);
}
ol.example2>li[data-act='N'] {
text-decoration: underline;
}
/* search box inside select2*/
input.select2-input {
margin: 12px 0 8px 0 !important;
}
div[id^="target"]:not(#target1) {
display: none;
}
/* here to set height and auto scroll for both container*/
ol#myUL,
ol.example {
height: 600px !important;
overflow: scroll;
}
/*div.newMenu{ border: 1 solid black; }*/
ol.example2>li:last-child {
margin-bottom: 30px;
}
div.iconPopover {
top: 0px !important;
}
.modal {
background-color: transparent !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://johnny.github.io/jquery-sortable/js/jquery-sortable.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
<form class="form-horizontal">
<session id="MenuList">
<div class="container">
<dir class="row">
<div class="col-xs-6">
<h4 class="center">List Available Menu</h4>
<ol class="example forms" id="myUL">
<li>
<i class=""></i>Customer
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol>
<li>
<i class=""></i>Customer A
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Customer B
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Customer C
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
</ol>
</li>
<li>
<i class=""></i>Teller
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol>
<li>
<i class=""></i>Till Open
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Till Close
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Cash Deposit
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Cash Withdrawal
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Till to Till Transfer
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Income Posting
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Expense Posting
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
</ol>
</li>
</ol>
</div>
<div class="col-xs-6">
<h4 class="center">List Available Menu</h4>
<div class="newMenu">
<ol class="example example2 sortable">
</ol>
</div>
</div>
</dir>
</div>
</session>
</form>
</div>
This tiny simple sample snippet helped me achieve my goal.
I hoped this will help for somebody having a problem like this. Thanks.

.addClass when #mainNav :visible

Desired:
When menu button is clicked and navigation(#mainNav) slides in, check to see if visible. If so, .addClass .is-open to .nav-item. When navigation (#mainNav) is closed, .removeClass .is-open from .nav-item.
Issue:
Class is not being added to .nav-item when navigation is visible(Slides).
HTML
<header>
<!-- Logo and Burger -->
<div class="brand-wrap">
<div class="trigger-wrapper">
<button id="burger">
<div class="nav-trigger-line"></div>
<div class="nav-trigger-line"></div>
<div class="nav-trigger-line"></div>
</button>
</div>
</div>
<!-- End of Logo and Burger -->
<!-- Navigation -->
<nav id="mainNav" class="navbar main-nav">
<div class="nav-container">
<ul class="nav flex-column">
<li class="nav-item">
<span class="nav-number">01.</span><br>Our Company
</li>
<li class="nav-item">
<span class="nav-number">02.</span><br>Our People
</li>
<li class="nav-item">
<a href="services.html" class="nav-link">
<span class="nav-number">03.</span>
<br>Services</a>
</li>
<li class="nav-item">
<span class="nav-number">04.</span><br>Careers
</li>
<li class="nav-item">
<span class="nav-number">05.</span><br>Contact Us
</li>
</ul>
</div>
</nav>
<!-- End of Navigation -->
</header>
CSS
.brand-wrap {
position: fixed;
top: 20px;
right: 20px;
z-index: 999;
}
#burger {
float: right;
margin: 0;
}
.trigger-wrapper {
position: absolute;
right: 5px;
}
.main-nav a {
text-decoration: none;
}
.main-nav {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(35, 31, 32, 1);
}
.nav-container {
margin-top: 80px;
}
.nav-link {
color: #fff;
font-size: 1.5em;
font-weight: 800;
padding: .25em 1em;
}
.nav-link:hover {
color: #82bc00;
}
.nav-number {
font-size: .5em;
font-weight: 600;
}
.nav-trigger-line {
height: 3px;
width: 30px;
background-color: #fff;
margin: 6px auto;
}
JS
// Menu click function
$('#burger').click(function() {
$('#mainNav').toggle();
});
// Check if Nav is visible
if ($('#mainNav').is(':visible')) {
$(".nav-container .nav .nav-item").addClass("is-open");
} else {
$(".nav-container .nav .nav-item").removeClass("is-open");
}
jsfiddle: https://jsfiddle.net/WeebleWobb/auszo29m/2/

You need to send it inside the event handler:
// Menu click function
$('#burger').click(function() {
$('#mainNav').toggle(function () {
// Check if Nav is visible
if ($('#mainNav').is(':visible')) {
$(".nav-container .nav .nav-item").addClass("is-open");
} else {
$(".nav-container .nav .nav-item").removeClass("is-open");
}
});
});
The best thing you can do is, you should put it inside the callback function like above.

How to keep a navbar toggle open until selection is made

I've quite a long drop down menu on a site I'm working on when it switches over to mobile. For the life of me I cannot get this dropdown navbar toggle to stay open. What it currently does is opens to show all the selections and then it snaps up to only show one possible selection. It's a scrollable menu, but I want it to stay open until it's clicked.... Can anyone see what I'm doing wrong?
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
// Only enable if the document has a long scroll bar
// Note the window height + offset
if (($(window).height() + 100) < $(document).height()) {
$('#top-link-block').removeClass('hidden').affix({
// how far to scroll down before link "slides" into view
offset: {
top: 100
}
});
}
//Fade in for well-trigger on index.html
var divs = $('.well-trigger');
$(window).scroll(function() {
if ($(window).scrollTop() < 480) {
divs.stop(true, true).fadeIn("slow");
} else {
divs.stop(true, true).fadeOut("slow");
}
});
.navbar {
font-family: 'Contrail One', cursive;
padding: 10px;
font-size: 18px;
-webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
transition: background .5s ease-in-out, padding .5s ease-in-out;
}
.navbar-brand {
padding-top: 5px;
}
.navbar-toggle {
margin: 10px 0;
}
.navbar-inverse {
background-color: #000011;
}
.navbar-nav,
.navbar-nav li,
.navbar-nav li a {
height: 80px;
line-height: 80px;
padding-left: 5px;
padding-right: 5px;
}
.navbar-nav li a {
padding-top: 0;
padding-bottom: 0;
margin: 0px -5px 0px -5px;
}
#media (max-width: 767px) {
.navbar-brand {
padding: 0px;
}
.navbar-brand img {
margin-top: 5px;
margin-left: 5px;
margin-bottom: 5px;
}
.navbar-nav,
.navbar-nav li,
.navbar-nav li a {
height: 50px;
line-height: 50px;
padding-left: 5px;
padding-right: 5px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="http://www.example.com/testing/index.html">
<div class="navbar-brand navbar-brand-left">
<img class="hidden-xs" src="img/logo_transparent_REG.png" alt="">
<img class="visible-xs" src="img/logo_transparent_XS.png" alt="">
</div>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
REGISTRATION
</li>
<li>
COURSE OVERVIEW
</li>
<li>
SERVICES
</li>
<li>
INSTRUCTORS
</li>
<li>
BLOG
</li>
<li>
CONTACT
</li>
<li>
LINKS
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>

You have set the height to 50px in the #media-query. Change it to auto, and all is well.
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
// Only enable if the document has a long scroll bar
// Note the window height + offset
if (($(window).height() + 100) < $(document).height()) {
$('#top-link-block').removeClass('hidden').affix({
// how far to scroll down before link "slides" into view
offset: {
top: 100
}
});
}
//Fade in for well-trigger on index.html
var divs = $('.well-trigger');
$(window).scroll(function() {
if ($(window).scrollTop() < 480) {
divs.stop(true, true).fadeIn("slow");
} else {
divs.stop(true, true).fadeOut("slow");
}
});
.navbar {
font-family: 'Contrail One', cursive;
padding: 10px;
font-size: 18px;
-webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
transition: background .5s ease-in-out, padding .5s ease-in-out;
}
.navbar-brand {
padding-top: 5px;
}
.navbar-toggle {
margin: 10px 0;
}
.navbar-inverse {
background-color: #000011;
}
.navbar-nav,
.navbar-nav li,
.navbar-nav li a {
height: 80px;
line-height: 80px;
padding-left: 5px;
padding-right: 5px;
}
.navbar-nav li a {
padding-top: 0;
padding-bottom: 0;
margin: 0px -5px 0px -5px;
}
#media (max-width: 767px) {
.navbar-brand {
padding: 0px;
}
.navbar-brand img {
margin-top: 5px;
margin-left: 5px;
margin-bottom: 5px;
}
.navbar-nav,
.navbar-nav li,
.navbar-nav li a {
height: auto;
line-height: 50px;
padding-left: 5px;
padding-right: 5px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="http://www.example.com/testing/index.html">
<div class="navbar-brand navbar-brand-left">
<img class="hidden-xs" src="img/logo_transparent_REG.png" alt="">
<img class="visible-xs" src="img/logo_transparent_XS.png" alt="">
</div>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
REGISTRATION
</li>
<li>
COURSE OVERVIEW
</li>
<li>
SERVICES
</li>
<li>
INSTRUCTORS
</li>
<li>
BLOG
</li>
<li>
CONTACT
</li>
<li>
LINKS
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>

onclick remove selected and show/hide the delete button and dropdown title

Use this jsFiddle instead of Stack Snippet
$(".dropdown li a").dblclick(function(){
//alert('Long pressed');
$(this).parent().toggleClass('selected');
if ($('.dropdown li').hasClass('selected')) {
// alert('1 Item selected');
$(this).parent().parent().parent().parent().parent().parent().find('.header').find('.dropdown-title').addClass('hide');
$(this).parent().parent().parent().parent().parent().parent().find('.deleteli').removeClass('hide');
$(this).parent().parent().parent().parent().parent().parent().find('.deleteli').addClass('show');
}
else {
$(this).parent().parent().parent().parent().parent().parent().find('.header').find('span').removeClass('hide');
$('.delete').removeClass('show');
$('.delete').addClass('hide');
// alert('1 Item dis selected');
}
});
$('a#deletelibtn').click(function () {
// body...
// alert('deletelibtn clicked')
$(this).parent().parent().find('.selected').remove();
$(this).parent().find('.dropdown-title').removeClass('hide');
$(this).parent().find('.dropdown-title').addClass('show');
})
/*Dropdown Messages*/
.messages-dropdown{
width: 300px;
}
.messages-dropdown .header{
padding: 15px;
border-bottom: 1px solid #ccc;
}
.messages-dropdown .header small{
float: right;
}
.messages-dropdown .header small a{
font-style: 9px;
margin-left: 5px;
}
.messages-dropdown .footer{
text-align: center;
border-top: 1px solid #ccc;
}
.messages-dropdown .footer a{
padding: 15px;
}
.messages-items{
list-style: none;
padding: 0;
padding-left: 0px;
margin: 0;
}
.messages-items .Mitem {
padding: 10px;
padding-left: 10px;
border-left: 3px solid transparent;
}
.messages-items .Mitem:hover {
background: #f0f0f0;
border-color: #3a3f51;
}
.messages-items .Mitem a {
display: inline-block;
width: 100%;
}
.messages-items .Mitem a:hover {
text-decoration: none;
background: #f0f0f0;
}
.messages-items .Mitem a b{
color: #444;
letter-spacing: 1px;
}
.messages-items .Mitem a small{
color: #999;
letter-spacing: 1px;
}
.messages-items .Mitem img{
float: left;
margin-right: 10px;
border-radius: 100% !important;
padding: 5px;
border: 1px solid #ccc;
width: 40px;
height: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="icon icon-li-envelope message-bell"></i>
<span class="badge message-badge">4</span>
</a>
<ul class="dropdown-menu messages-dropdown">
<li class="header">
<span class="dropdown-title">
heading
</span>
<a class="#delete" id="deletelibtn">
delete
</a>
</li>
<div id="message">
<li>
<ul class="messages-items">
<li class="Mitem">
<a href="#MessageItem">
content
</a>
</li>
</ul>
</li>
<li>
<ul class="messages-items">
<li class="Mitem">
<a href="#MessageItem">
content
</a>
</li>
</ul>
</li>
<li>
<ul class="messages-items">
<li class="Mitem">
<a href="#MessageItem">
content
</a>
</li>
</ul>
</li>
<li>
<ul class="messages-items">
<li class="Mitem">
<a href="#MessageItem">
content
</a>
</li>
</ul>
</li>
</div>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
When I select the messages the deletelibtn option is enabled and I'm able to delete the messages, but after deleting the messages the deletelibtn button is not hiding and then again if am selecting the messages again the delete option is not showing.
When the deletelibtn option is showing the dropdown-title should be hidden, similarly when the dropdown-title is visible the deletelibtn button should be hidden.
I hope I explained what I need exactly.

I changed several little things which wouldn't affect functionality but are 'best practice'. There were a couple of small targeting issues as well which are what caused the functional problem. The reason it was so hard to debug is because your html was a but jumbled and you reused the same words over and over making it hard to follow the logic. Here is the corrected js.
$('.dropdown-menu li').on('click', function(event){
//The event won't be propagated to the document NODE and
// therefore events delegated to document won't be fired
event.stopPropagation();
});
$("ul.messages-items a").dblclick(function(){
$(this).closest('ul.messages-items').parent().addClass('selected');
var $container = $(this).closest('div.container-fluid')
if ($('li.dropdown').hasClass('open')) {
$container.find('.header').find('.dropdown-title').removeClass('show').addClass('hide');
$container.find('.deleteli').removeClass('hide').addClass('show');
}
else {
$container.find('.header').find('span').removeClass('hide').addClass('show');
$('.delete').removeClass('show').addClass('hide');
}
});
$('a#deletelibtn').click(function () {
var $this = $(this);
$('#message').find('li.selected').remove();
$this.parent().find('.dropdown-title').removeClass('hide').addClass('show');
$this.find('i.deleteli').removeClass('show').addClass('hide');
})
https://jsfiddle.net/xctgo71x/23/
You can add this off-click event to reset the dropdown.
$(document).click(function(e){
//console.log(e);
if(true)
ResetDropdown();
});
function ResetDropdown(){
$('span.dropdown-title').removeClass('hide').addClass('show');
$('i.deleteli').removeClass('show').addClass('hide');
$('#message').find('li.selected').removeClass('selected');
}
It works ok on the jsfiddle but on your actual code you may need to tweak it a little.
https://jsfiddle.net/xctgo71x/29/

how to make a left aligned navigation with dropdown elements

I have been struggling to get my head around this for over a week now and I think my main problem is that I don't know where I should be looking.
Basically what I want to create is a navigation area that is on the left side of the page. The person who I am building the website for has given me a TON of navigation elements (seriously there's about 25-30) that they would like.
I have managed to categorise them into proper headers and sub-headers but now I'm faced with the problem that I just don't know how to build in the dropdown functionality.
I'm very new to web development and this is a great challenge to take on but I don't know where to start.
I have watched hours of tutorial vids talking about how to build navbars that are top aligned, that pop out on top of the content etc but none that "slide" open (if that makes sense) so that when you click on an element, the other links below it slide down to make room for the sub-headers.
Here is what I have so far (it's a bit of a mess I know) have mercy!
http://www.fabio-felizzi.com/
It's just so I can show you what I mean by the styling of the navigation area.
I've found myself wrapped up in a giant knot with this particular problem and could really use some help even if it's just a point in the right direction.
I have tried to search for threads which have this particular problem but nothing has really hit the nail on the head so to speak, I apologise if I've missed something.
Many Thanks
Here is the HTML that contains the navbar
<!-- Sidebar -->
<nav id="sidebar-wrapper">
<img src="img/logo.png" alt="People's Centre for Change">
<ul class="sidebar-nav">
<li>About Us
<ul class="dropdown-wrapper">
<li>About Us</li>
<li>Our Journey</li>
<li>Where We Are Going</li>
</ul>
</li>
<li>What We Do</li>
<li>The Building</li>
<li>Volunteer With Us</li>
<li>Get Involved</li>
<li>Unique Products</li>
<li>Donate</li>
<li>Contact Us</li>
<li>Calendar</li>
</ul>
</nav>
and here is the Javascript
//handle menu clicks and animate loading in of new content
$('ul.sidebar-nav li a').click(function () {
var toLoad = $(this).attr('href');
$('#ajax-content-wrapper').load('html/' + toLoad + '.php', function(){
$('#ajax-content-wrapper').hide('slow',loadContent);
function loadContent() {
$('#ajax-content-wrapper').load(toLoad,'',showNewContent());
}
function showNewContent() {
$('#ajax-content-wrapper').show('slow');
}
$('.bxslider').bxSlider();
});
return false;
});
//hide/display sidebar nav
$("#menu-toggle").click(function (e){
e.preventDefault();
$("#wrapper").toggleClass("menuDisplayed");
});
//hide/display dropdown nav
$("#dropdown-toggle").click(function (e){
e.preventDefault();
e.stopPropagation();
$(".dropdown-wrapper").toggleClass("dropdownDisplayed");
});
});
I have yet to get to the CSS as frankly I've run into a brick wall with this and my brain has kind of short circuited. I'm now at the stage where I'm so confused with all of this that I wouldn't even be able to explain my work.

Here are some adjustments to your code to factor in submenu's and a somewhat improved mobile setup.
It simply uses the Bootstrap Toogle that normal nav menus use.
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
body,
html {
height: 100%;
overflow: hidden;
}
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
.btn-default#menu-toggle,
.btn-default#menu-toggle:hover,
.btn-default#menu-toggle:focus {
border: none;
outline: none;
box-shadow: none;
background: none;
color: #419ca6;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
overflow-x: hidden;
background: #419ca6;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #ddd;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #444;
background: rgba(255, 255, 255, 0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav .sidebar-brand {
text-align: center;
}
.sidebar-nav ul {
list-style: none;
list-style-position: outside;
padding: 0;
margin: 0;
}
.sidebar-nav ul > li {
font-size: 13px;
}
.sidebar-nav ul > li > a {
color: #ddd;
text-decoration: none;
padding-left: 10px;
}
.sidebar-nav ul > li > a:hover {
color: #fff;
background: rgba(255, 255, 255, 0.6);
}
#media(min-width:768px) {
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<img src="http://www.fabio-felizzi.com/img/logo.png" alt="People's Centre for Change">
</li>
<li> Home
</li>
<li> About Us<span class="caret"></span>
<ul id="drop1" class="collapse" data-parent="#sideNavParent">
<li>About Us
</li>
<li>Our Journey
</li>
<li>Where We Are Going
</li>
</ul>
</li>
<li>What We Do
</li>
<li>The Building
</li>
<li>Volunteer With Us
</li>
<li>Get Involved
</li>
<li>Unique Products
</li>
<li>Donate
</li>
<li>Contact Us
</li>
<li>Calendar
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper"> <span class="glyphicon glyphicon-th-list"></span>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>People's Centre for Change</h1>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->

If you want to use panel for drop down menu you may try what Peter Geerts said. If you ar looking for old traditional fly out menu then this basic example may be helpful for you.
<nav id="sidebar-wrapper"> <img src="img/logo.png" alt="People's Centre for Change">
<ul class="sidebar-nav">
<li id="dropdown-toggle">
About Us
<ul class="dropdown-wrapper">
<li>About Us
</li>
<li>Our Journey
</li>
<li>Where We Are Going
</li>
</ul>
</li>
<li>What We Do
</li>
<li>The Building
</li>
<li>Volunteer With Us
</li>
<li>Get Involved
</li>
<li>Unique Products
</li>
<li>Donate
</li>
<li>Contact Us
</li>
<li>Calendar
</li>
</ul>
</nav>
#sidebar-wrapper {
background:teal;
width:200px;
}
#sidebar-wrapper a {
color:#fff;
text-decoration:none
}
#dropdown-toggle ul {
background:red;
width:200px; /*Adjust as per requirement*/
position:absolute;
left:150px; /*Adjust as per requirement*/
top:50px; /*Adjust as per requirement*/
display:none
}
#dropdown-toggle:hover ul {
display:block
}
<nav id="sidebar-wrapper">
<img src="img/logo.png" alt="People's Centre for Change">
<ul class="sidebar-nav">
<li id="dropdown-toggle">About Us
<ul class="dropdown-wrapper">
<li>About Us</li>
<li>Our Journey</li>
<li>Where We Are Going</li>
</ul>
</li>
<li>What We Do</li>
<li>The Building</li>
<li>Volunteer With Us</li>
<li>Get Involved</li>
<li>Unique Products</li>
<li>Donate</li>
<li>Contact Us</li>
<li>Calendar</li>
</ul>
</nav>
Helpful Bootstrap based resources from where you may learn more in details.
Fiddle
Simple Sidebar Menu
bootsnipp