Develop Reference

Passing dynamically created IDs in slideToggle callback

I am creating a tree type navigation structure using jQuery. I have a html unordered list where there are categories and sub-lists inside those. When a user clicks a category the list items under that category slideToggle on and off. It works great until a user creates his own category. Then I need to activate the slideToggle method for that new category and sub-category.
The html structure looks something like this:
<ul>
<li> <span id="userCat_1">Cat 1</span>
<ul id="subCat_1>
<li> Button A </li>
<li> Button B </li>
<li> Button C </li>
</ul>
</li>
<li> <span id="userCat_2">Cat 2</span>
<ul id="subCat_2>
<li> Button Z </li>
</ul>
</li>
</ul>
This is my most recent attempt at adding the slideToggle functionality to all "categories" in the list. Here I'm trying to use the objects' IDs (userCat_x and subCat_x) to control the slideToggle.
categoryArray= ["1", "2", "3"]
function activateToggle(){
for (var i=0; i<categoryArray.length; i++){
$("#userCat_" + categoryArray[i]).click(function(i){
$("#subCat_" + categoryArray[i]).slideToggle();
});
}
}
I'm sure im missing some concept. Spent time looking for the answer and this question seemed to move me in the right direction. Toggle worked for new objects but it resulted in toggling other categories not the clicked on categories sub-categories.

You'll probably avoid the whole headache by just using event delegation and a shared class:
$(document).on('click', '.my-menu-class', function() {
$(this).children('ul').slideToggle();
});
<ul>
<li class="my-menu-class"> <span id="userCat_1">Cat 1</span>
<ul id="subCat_1">
<li> Button A </li>
<li> Button B </li>
<li> Button C </li>
</ul>
</li>
<li class="my-menu-class"> <span id="userCat_2">Cat 2</span>
<ul id="subCat_2">
<li> Button Z </li>
</ul>
</li>
</ul>

Collapsible menu has all drop down menu's expanded

I'm creating a website for a project and i'm not allowed to use frameworks (so no bootstrap), i've now run into a problem where the navigation bar when collapsed (screen width under 800px) has all the individual links expanded, rather than being in individual categories.
I've uploaded this website to
here
The Html nav bar
<nav role="navigation" id="cssmenu">
<ul>
<li class="active">Home</li>
<li class="has-sub">Courses
<ul>
<li>Digital Media</li>
<li>Web Development</li>
<li>Journalism</li>
<li class="last">Information & Communications</li>
</ul>
</li>
<li class="has-sub">Facilities
<ul>
<li>Societies</li>
<li>Jobs and Placements</li>
<li class="last">Library</li>
</ul>
</li>
<li class="has-sub">Manchester & Student Life
<ul>
<li>Travel</li>
<li>Attractions</li>
<li class="last">Nightlife</li>
</ul>
</li>
<li class="has-sub">Student Help
<ul>
<li>Finance</li>
<li>Student Union</li>
<li class="last">Assistance</li>
</ul>
</li>
<li class="last">Contact</li>
</ul>
</nav>
The Jquery script
( function( $ ) {
$( document ).ready(function() {
// Cache the elements we'll need
var menu = $('#cssmenu');
var menuList = menu.find('ul:first');
var listItems = menu.find('li').not('#responsive-tab');
// Create responsive trigger
menuList.prepend('<li id="responsive-tab">Digi-Co</li>');
// Toggle menu visibility
menu.on('click', '#responsive-tab', function(){
listItems.slideToggle('fast');
listItems.addClass('collapsed');
});
});
} )( jQuery );
The css can also be found
here
Any help will be appreciated, i'm sure its just a simple overwriting syntax, but i can't be too sure, whether it's that or if it's a scripting problem.
Thank you.

Collapsing nested lists in a hiearchy-structure with jQuery

I have a very annoying problem, which might be a product of my poor knowledge of javascript and jQuery.
I have a list that uses recursion to enable a hierarchy-structure, it looks as follows
$(function (){
$('#foo').click(function() {
$(this).children('ul').slideToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id='foo'>A
<ul>
<li id='foo'>B
<ul>
<li>
Sub-sub
</li>
</ul>
</li>
</ul>
</li>
</ul>
I'm trying to accomplish a collapse function, so that when the user clicks on 'A' all the children elements collapses, and if she clicks the 'B' node all of 'B's children collapses. But however I try I always end up having all of the lists with id = 'foo' collapsing.
In my eyes, $(this).children('ul').slideToggle(); will collapse the children, since $(this) points to the list element clicked...?
Been at this for far to long now, would love some help!

Here you go... No change in HTML. But like other suggested, you need to have unique ID's
$(function (){
$('li').click(function(event) {
event.stopPropagation();
$(event.target).children('ul').slideToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id='foo'>A
<ul>
<li id='foo'>B
<ul>
<li>
Sub-sub
</li>
</ul>
</li>
</ul>
</li>
</ul>

How to add class dynamically using ajax.?

When i click on any name I have to add class "active" for selected name's anchor tag and as well as department names of that user.
<ul id="orglistingid">
<li>
<a>Sales </a> <!--Deparemtn Name -->
<ul id="dId">
<li>
<a>Rahul </a> <!--User -->
</li>
<li>
<a>Nitin </a>
</li>
</ul>
</li>
</ul>
<ul id="orglistingid">
<li>
<a class="active">Development</a>
<ul>
<li id="dId">
<a class="active">Rokesh </a>
</li>
<li>
<a>Preeti</a>
</li>
</ul>
</li>
</ul>
I am using below code, can anyone tell what correction i need to do..?
if (orgID != null && orgID == 'dId') {
$("#dId li a").removeClass("orglistactive");
$(this).attr("class","orglistactive");
var parentID = $(e.target).parent().parent().parent().attr("id");
alert($(e.target).parent().parent().parent().attr("id"));
$("#"+parentID+" a").attr("class","orglistactive");
}

Looks like you are trying to achieve something as shown below:
<script type="text/javascript">
var orgID = $('#dId');
if(orgID.attr('id') == 'dId'){
orgID.find('>li>a').addClass("orglistactive");
var parentID = orgID.attr("id");
alert(orgID.attr("id"));
}
</script>
But couple of things are found, are not correct from html and jquery perspective.
Id are unique but you have used 'dId' for more than one time.
e.target works only when there is an event attached with an element or can be captured using "window.event || e". In your code I could not see the purpose of e.target
Hope this helps! :)

This can be quickly achieved with a little of jQuery.
First Approach
$('ul a').click(function(){
$(this).addClass('orglistactive');
$(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});
Take a look at a live demo: http://jsfiddle.net/augusto1982/6xM2P/
Second Approach
One thing to keep in mind is that this code works ok if there's no other list in the page. If this is not the case, you should use some CSS class to determine the object to bind the click function. Otherwise, the jQuery selector gets a bit messy.
$('#orglistingid li ul li a').click(function(){
$(this).addClass('orglistactive');
$(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});
Example: http://jsfiddle.net/augusto1982/GXcvD/
Third Approach
I would also recommend you to add a class to each user anchor, to make it easier.
HTML
<ul id="orglistingid">
<li>
<a>Sales </a> <!--Deparemtn Name -->
<ul id="dId">
<li>
<a class='user'>Rahul </a> <!--User -->
</li>
<li>
<a class='user'>Nitin </a>
</li>
</ul>
</li>
</ul>
<ul id="orglistingid">
<li>
<a class="active">Development</a>
<ul>
<li id="dId">
<a class="active user">Rokesh </a>
</li>
<li>
<a class='user'>Preeti</a>
</li>
</ul>
</li>
</ul>
jQuery
$('.user').click(function(){
$(this).addClass('orglistactive');
$(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});
Take a look at this second example: http://jsfiddle.net/augusto1982/GW4mt/
Final Approach
In order to avoid all the parent()...parent() calls, you could use the closest method, but you need to change your HTML a bit.
HTML
<ul id="orglistingid">
<li class='department'>
<a>Sales </a> <!--Deparemtn Name -->
<ul id="dId">
<li>
<a class='user'>Rahul </a> <!--User -->
</li>
<li>
<a class='user'>Nitin </a>
</li>
</ul>
</li>
</ul>
<ul id="orglistingid">
<li class='department'>
<a class="active">Development</a>
<ul>
<li id="dId">
<a class="active user">Rokesh </a>
</li>
<li>
<a class='user'>Preeti</a>
</li>
</ul>
</li>
</ul>
jQuery
$('.user').click(function(){
$(this).addClass('orglistactive');
$(this).closest('.department').find('a:first').addClass('orglistactive');
});
Demo: http://jsfiddle.net/augusto1982/e7PVF/
Like other comments, I'd recommend you to have unique IDs. While this is not a restriction, is a best practice.

If element has children html elements

I the following un-ordered list.
<ul>
<li>
<a class="hlink hlink-1" href="#"> Prank Boss Apps </a>
<ul>
<li> link 1 </li>
<li> link 2 </li>
<li> link 3 </li>
</ul>
</li>
<li>
<a class="hlink hlink-2" href="#"> Uninstall an app. </a>
</li>
<li>
<a class="hlink hlink-3" href="#"> Contact Us </a>
</li>
</ul>
In the un-ordered list, not every list-item will have another un-ordered list.
<li> blah
<ul>
<li> link 1 </li>
<li> link 2 </li>
<li> link 3 </li>
</ul>
</li>
So some will just have a link inside of the list item and others will have a un-ordered list inside.
How can I check if the list item doesn't have another un-ordered list inside of it?

function hasChildULs(thisList)
{
if ($(thisList).children('ul').length > 0)
{
return true;
}
else
{
return false;
}
}

Once you've got a reference to the li element you can use this.
function isLeafNode(liElement) {
return !liElement.getElementsByTagName("ul").length;
}

This should get you started: http://www.w3schools.com/dom/dom_element.asp (if you don't want to use jQuery)