Develop Reference

How to toggle only header element not the list

I have this function that expands the <ul> and hides it after it is pressed.But when i press on <li> it will also close or expand. How do I make it to toggle only when the the <h4> is clicked ?
$('.category ul').hide();
$('.sub').click(function() {
$(this).find('ul').slideToggle();
});
<ul class="category text-center">
<li class="sub">
<h4><b>Licenses</b></h4>
<ul class="archive_posts">
<li class="posts">Licence types and users plans</li>
<li class="posts">Adding new licence</li>
<li class="posts">Updating licence</li>
<li class="posts">Removing licence</li>
</ul>
</li>
</ul>
Thanks in advance.

Changes made
► changed $('.sub').click(function() { to $('.sub h4')
► changed $(this).find('ul') to $(this).next()
Working Demo
$('.category ul.archive_posts').hide();
$('.sub h4').click(function() {
$(this).next().slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="category text-center">
<li class="sub">
<h4><b>Licenses</b></h4>
<ul class="archive_posts">
<li class="posts">Licence types and users plans
</li>
<li class="posts">Adding new licence
</li>
<li class="posts">Updating licence
</li>
<li class="posts">Removing licence
</li>
</ul>
</li>
</ul>

Change the binding to the h4, then target the next ul.archive_posts for sliding.
$('.category ul').hide();
$('h4').click(function() {
$(this).next('ul.archive_posts').slideToggle();
});
See it working in this JS Fiddle: https://jsfiddle.net/rwvdf8ys/1/
Hope that helps.

The problem is $('this').find('ul').slideToggle();
'this' represents the obj that is cals the function. In this case it is h4. H4 has noe ul, so you cant find it. but you can find ul on $('.sub')
Here is ann example
$('.category ul').hide();
$('h4').click(function() {
$('.sub').find('ul').slideToggle();
});
<ul class="category text-center">
<li class="sub">
<h4 id="foo"><b>Licenses</b></h4>
<ul class="archive_posts">
<li class="posts">Licence types and users plans</li>
<li class="posts">Adding new licence</li>
<li class="posts">Updating licence</li>
<li class="posts">Removing licence</li>
</ul>
</li>
</ul>
js fiddle:
https://jsfiddle.net/8hvc4cfh/

You might use the siblings('ul') selector to find and close the neighbour ul. While $(".sub h4") limits the clickable elements to your h4.
$('.category ul').hide();
$('.sub h4').click(function() {
console.log('test');
$(this).siblings('ul').slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="category text-center">
<li class="sub">
<h4><b>Licenses</b></h4>
<ul class="archive_posts">
<li class="posts">Licence types and users plans
</li>
<li class="posts">Adding new licence
</li>
<li class="posts">Updating licence
</li>
<li class="posts">Removing licence
</li>
</ul>
</li>
</ul>

You can try this.
$('li.sub h4').click(function() {
$(this).next().slideToggle();
});

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.

Migrating menu tree code from jquery 1.7.1 to 1.9.1

I've a js code working with jquery 1.7.1 broken after migration to 1.9.1
You can see the problem on http://jsfiddle.net/QK5Ld/2/.
The code I'm using is this:
$("#navigation li ul").each(function(){
var that = this;
$(this).hide();
$(this).prev().toggle(function() {
$(that).show();
},
function() {
$(that).hide();
}
);
})
I read that toggle() is no more supported but I'm no js expert and I've lost many hours trying to complete update this js code.
Any idea?
Thank you in advance.
Nicola.
Note: The HTML used is like this:
<div id="navigation">
<ul>
<li id="category-2850">
ARCHIVIAZIONE
<ul>
<li id="category-3021">
ARCHIVIAZIONE MODULARE
<ul>
<li id="category-3326">SCATOLE ARCHIVIO CON MANIGLIE</li>
<li id="category-3022">SCATOLE ARCHIVIO IN CARTONE</li>
</ul>
</li>
<li id="category-2876">
BUSTE TRASPARENTI
<ul>
<li id="category-2917">BUSTE A PERFORAZIONE UNIVERSALE</li>
<li id="category-2916">BUSTE A U</li>
<li id="category-2877">BUSTE PER USI DIVERSI E DEDICATI</li>
</ul>
</li>
</ul>
</li>
<li id="category-3100">
ARREDAMENTO E COMPLEMENTI
<ul>
<li id="category-3101">
COMPLEMENTI D'ARREDO
<ul>
<li id="category-3102">ACCESSORI VARI</li>
<li id="category-3215">APPENDIABITI</li>
<li id="category-3307">CESTINI E POSACENERE</li>
<li id="category-3189">LAMPADE DA TAVOLO</li>
<li id="category-3214">LAMPADE DA TERRA</li>
<li id="category-3217">OROLOGI - BAROMETRI DA SCRIVANIA E DA PARETE</li>
<li id="category-3336">PIANTE SINTETICHE E VASI</li>
<li id="category-3216">PORTAOMBRELLI</li>
<li id="category-3173">TAPPETI E ZERBINI</li>
<li id="category-3328">TAVOLINI E SEDIE ZONA RISTORO</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

Your code actually becomes cleaner in 1.9:
$("#navigation li ul").each(function(){
var that = this;
$(this).hide().prev().click(function(e) {
e.preventDefault();
$(that).toggle();
});
});
Though this would have worked just as well in previous versions too.
Update: here's an even better way:
$("#navigation li ul").hide().prev().click(function(e){
e.preventDefault();
$(this).next().toggle();
});
jsfiddle

click on li if no leaf node its append in another div

I have one Activity xml file and I am try to get from activity when click on activity there child display. Its look like end of the all click.
<ul id="firstLevelChild">
<ul id="ul">
<li id="4">Activities
<ul class="ul">
<li id="10066">Physical1
<ul class="ul">
<li id="10067">Cricket
<ul class="ul">
<li id="10068">One Day</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</ul>
Now I want that if li have no leaf node then its display in other another div. Something like:
Click on Acitivities there have child node Physical1 and there also child Cricket and there chil One Day now one day have no child when click on one day its display in my <div id="result"></div>

I would add this as a comment, but I don't have enough rep. ChildNodes() isn't a function - since it looks like you're using jQuery, try children() instead.

I think javascript could helpr you there. A part from the fact that you first build your DOM correct ;)
The hasChildNodes() method returns TRUE if the current element node has child nodes, and FALSE otherwise.
http://www.w3schools.com/dom/met_element_haschildnodes.asp

Assuming the markup you provided is how it's going to be always i.e. ul as child for all li. You just check if ul exists inside the current li. See fiddle
HTML
<div id="content">
<ul id="firstLevelChild">
<li>
<ul id="ul">
<li id="4">Activities
<ul class="ul">
<li id="10066">Physical1
<ul class="ul">
<li id="10067">Cricket
<ul class="ul">
<li id="10068">One Day</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<h2>Result</h2>
<ul id="result"></ul>
JS
$('#content li').each(function (i) {
//for display purpose only
$('#content').append('<span class="list">li(' + i + '):' + $('ul', $(this)).length + '</span>');
//the code you needed
if ($('ul', $(this)).length < 1) {
$(this).on('click', function () {
$('#result').append($(this).parent().html());
});
}
});

Append to element is not working

I have the following HTML:
<textarea class="input" placeholder="Tap to enter message" maxlength="160"></textarea>
<div class="keyboard">
<ul id="special">
<li data-letter="!">!</li>
<li data-letter="?">?</li>
<li data-letter=",">,</li>
<li data-letter=":">:</li>
<li data-letter=";">;</li>
</ul>
<ul id="first">
<li data-letter="q">q</li><li>1</li>
<li data-letter="w">w</li><li>2</li>
<li data-letter="e">e</li><li>3</li>
<li data-letter="r">r</li><li>4</li>
<li data-letter="t">t</li><li>5</li>
<li data-letter="y">y</li><li>6</li>
<li data-letter="u">u</li><li>7</li>
<li data-letter="i">i</li><li>8</li>
<li data-letter="o">o</li><li>9</li>
<li data-letter="p">p</li><li>0</li>
</ul>
<ul id="second">
<li data-letter="a">a</li>
<li data-letter="s">s</li>
<li data-letter="d">d</li>
<li data-letter="f">f</li>
<li data-letter="g">g</li>
<li data-letter="h">h</li>
<li data-letter="j">j</li>
<li data-letter="k">k</li>
<li data-letter="l">l</li>
</ul>
<ul id="third">
<li id="caps" class="pointer">⇧<span id="underline" class="color">_</span></li>
<li data-letter="z">z</li>
<li data-letter="x">x</li>
<li data-letter="c">c</li>
<li data-letter="v">v</li>
<li data-letter="b">b</li>
<li data-letter="n">n</li>
<li data-letter="m">m</li>
<li><img src="backspace.png"></li>
</ul>
<ul id="fourth">
<li class>?123</li>
<li>,</li>
<li> </li>
<li>.</li>
<li><img src="search.png"></li>
</ul>
with the following javascript:
$('.keyboard ul li').click(function() {
var data = $(this).data('letter');
$('.input').append(data);
});
What I want to have happen is when I click on one of the list items, I want the data-letter to insert itself into the input, sorta like an onscreen keyboard. But it isn't working. Can someone help me?
Here is a Fiddle
Update
This works now
My next problem is the uppercase button. When I click the button, the characters turn to uppercase. How would I use the data to inject an uppercase letter into the input?
The final problem is the first row of letters won't inject into the input. How do I fix this?

Try the below
Enable Jquery file instead of mootools in the fiddle
Thanks

Try:
Demo
$('.keyboard ul li').click(function() {
var data = $(this).data('letter');
$('.input').val( $('.input').val()+ data);
});​

All you have to do is remove the margin on the .input element (it's offscreen for me), and enable jquery on the jsfiddle. After that it works fine for me.

Not sure why jquery .data() not work, but you can use below "this.dataset.xxx"
var data = this.dataset.letter;

This is the solution I came up with
keys = $(".keyboard ul li");
keys.on("click", function() {
var let = $(this).text(),
upperlet = let.toUpperCase(),
lowerlet = let;
if (keys.hasClass("uppercase")){
input.append(upperlet);
}else {
input.append(lowerlet);
}
});
Instead of having the data-letter attribute for every single list-item, I got the text using this function, and appended it on click. This now also accounts for the uppercase letters as well.