Develop Reference

show/hide ul li based on id

I would like to show certain li based on id. So when I click on class c1. It will show me just list info about africa. Now it shows every li from demo-agents. This one is "menu". It is a map. After clicking on continent it rolls me down and points on certain li id. So when I click on class c1. It points me to li id="africa" and shows me the text.
But now it shows every li id. I would like to hide all li id africa-s.america. And when I click on class c1 it will show below li id africa.
<div id="map-continents">
<ul class="continents">
<li class="c1">Africa</li>
<li class="c2">Asia</li>
<li class="c3">Australia</li>
<li class="c4">Europe</li>
<li class="c5">North America</li>
<li class="c6">South America</li>
</ul>
</div>
and then info
<div id="demo-agents" class="demo-agents-list wrapper">
<ul>
<li id="africa"><h3>Africa</h3><p>Some info about Africa</p> </li>
<li id="asia"><h3>Asia</h3><p>Some info about Asia</p> </li>
<li id="australia"><h3>Australia</h3><p>Some info about Australia</p> </li>
<li id="europe"><h3>Europe</h3><p>Some info about Europe</p> </li>
<li id="north-america"><h3>North America</h3><p>Some info about North America</p> </li>
<li id="south-america"><h3>South America</h3><p>Some info about South America</p> </li>
</ul>
</div>
and js
$(document).ready(function(){
$('.c1').each(function () {
if($(this).hasClass('selected')) {
$('.demo-agents-list wrapper').hide();
$('.' + $(this).attr('id')).fadeIn(600);
}
});
I hide div in CSS. But Do you have any suggestions?

https://jsfiddle.net/jamesking/8rc2kepw/2/
$(function() {
$("#demo-agents li").hide();
$(".continents li a").on('click', function(e) {
var liToShow = $(this).attr("href");
$("#demo-agents li").hide();
$(liToShow).show();
e.preventDefault();
});
});

$(document).ready(function(){
$("#demo-agents li").hide();
$(".continents li").click(function(){
var crntlink = $(this).find("a").attr("href");
$("#demo-agents li").hide(); $(crntlink).show();
});
});

css
/*Hide the li with the maps, not the container div. the container div
must be visible, or else the children will always be invisible.*/
#demo-agents li { display:none }
jquery
$("#map-continents li")
.each(function() { //Show the one who is selected by default
if ($(this).hasClass('selected')) {
$('#demo-agents li').hide();
$($(this).find("a").attr('href')).fadeIn(600);
}
})
.on("click", function() { //bind click event
$("#map-continents .selected").removeClass("selected") //Remove "selected" class
$(this).addClass("selected")
$('#demo-agents li').hide(); //Hide the maps again
$($(this).addClass("selected").find("a").attr('href')).fadeIn(600); //Show the right map
})

$(document).ready(function(){
$("#demo-agents li").hide();
$(".continents li").click(function(){
var crntlink = $(this).find("a").attr("href");
$("#demo-agents li").hide();
$(crntlink).show();
});
});

Javascript hover/click trouble

I have an accordian style menu which works fine on hover state but I'd like to change to to click instead...
<script type="text/javascript">
$(document).ready(function(){
$('#nav > li').hover(
function() {
if ($('> span',this).attr('class') != 'active') {
$('#nav li ul').slideUp();
$('span',this).next().slideToggle();
$('#nav li span').removeClass('active');
$('> span',this).addClass('active');
}
},
function() {
$('#nav li ul').slideUp();
$('#nav li a').removeClass('active');
});
});
</script>
But simply replacing hover with click doesn't work, any advise much appreciated I'm a designer so my JS is pretty poor :)

Try this,
<script type="text/javascript">
$(document).ready(function () {
$('#nav > li').click(function () {
if ($('> span', this).attr('class') != 'active') {
$('#nav li ul').slideUp();
$('span', this).next().slideToggle();
$('#nav li span').removeClass('active');
$('> span', this).addClass('active');
}
}).mouseout(function (e) {
if ($(e.target).parents().find('#' + $(this).attr('id')).length) return;
$('#nav li ul').slideUp();
$('#nav li span').removeClass('active');
});
});
</script>
HTML:
<li id="t1"><span>Nav item click me 1</span>
<ul>
<li>Sub link 1</li>
<li>Sub link 2</li>
<li>Sub link 3</li>
<li>Sub link 4</li>
</ul>
</li>
<li id="t2"><span>Nav item click me 2</span>
<ul>
<li>Sub link 1</li>
<li>Sub link 2</li>
<li>Sub link 3</li>
<li>Sub link 4</li>
</ul>
</li>

.hover(fucntion() {}, function()); // .hover() accept two function
.click(function() {}); // only accept one
try
$('selector').on('click', function() {
if($(this).hasClass('active')) {
// do something if this has class active
}
else {
// do something if not.
}
} );

Jquery Slidetoggle, how to allow to show only one element?

This is my html:
<ul>
<li>
List
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</li>
<li>
List 2
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</li>
</ul>
And this js:
$('ul li ul').hide();
$('ul li').click(function() {
$(this).children().slideToggle();
});
I want to create slidetoggle, for example: when user click "List" and after open this user click List 2 then list one is hiding.
DEMO: http://jsfiddle.net/7dxAb/
I want only one open when user click.
Thanks!

Try this:
$('ul li ul').hide();
$('ul li').click(function() {
var _this = $(this);
_this.children().slideToggle();
$('ul > li').not(_this).children('ul').slideUp();
});
You hide "ul"s in all ListN elements except one that is clicked.

You can slideUp() all the other ul's before the slideToggle() like this:
$('ul li').click(function() {
$(this).parent().find('ul').slideUp();
$(this).children().slideToggle();
});
I'm not sure if this is the most effecient way tho.

Add
$('ul li ul').slideUp();
to the click event. This will hide the other uls.
The finished code would look like:
$('ul li ul').hide();
$('ul li').click(function() {
$('ul li ul').slideUp();
$(this).children().slideToggle();
});
http://jsfiddle.net/yvPFx/2/
Edit: You can use a class to keep track of what is showing.
http://jsfiddle.net/yvPFx/3/

Try this:
$('ul li ul').hide();
$("ul li").click(function () {
$(this).children().slideToggle("slow", function() {
//
});
$(this).siblings().children().slideUp("slow");
});

Remove all ul within li except the current li

I have to remove all ul within li except the current li.
<ul>
<li id="Li0">
<ul>
<li><span>Childnode1</span></li></ul>
</li>
<li id="Li1">
<ul>
<li><span>Childnode2</span></li></ul>
</li>
<li id="Li2">
<ul>
<li><span>Childnode3</span></li></ul>
</li>
<li id="Li3">
<ul>
<li><span>Childnode4</span></li></ul>
</li>
<li id="Li4">
<ul>
<li><span>Childnode5</span></li></ul>
</li>
<li id="Li5">
<ul>
<li><span>Childnode6</span></li></ul>
</li>
</ul>
So If i click on the li with id 'li4' every other li that are previous to this li or next to this li should have there ul to be removed from dom.
I was thinking of using the .not operator in jquery but till now not able to do this.

is that what you are searching for?
$(function(){
$('li').click(function(){
$(this).siblings().children("ul").remove();
});
});

Demo: http://jsfiddle.net/wwvBL/
$('li').on('click',function(){
var obj= $(this);
id= obj.attr('id');
obj.parent().find('li:not(#'+id+') > ul').remove();
})

This should help.
$(function () {
$('ul:first').delegate("li[id^='L']", 'click', function () {
$("ul:first > li[id!='"+$(this).attr('id')+"'] > ul").remove();
});
});​
Demo: http://jsfiddle.net/EJWnn/

Use siblings to find all other adjacent elements:
$("li").click(function() {
$(this).siblings().find("ul").remove();
});
You might want to have a more specific selector than "li".

JQuery Quickfix : I don't know how to call it

This is my HTML:
<ul class="test">
<li>One
<ul>
<li>Content One</li>
</ul>
</li>
<li>Two
<ul>
<li>Content Two</li>
</ul>
</li>
</ul>
I want to hide UL.TEST LI UL. When I click anchor "one" or when I click "ul.test li" or "ul.test li a"
How will I do it without using a CLASS or ID in the "ul.test li ul"?
My code is:
$(function(){
$("ul.test li").click(function(e){
e.preventDefault();
$(this).slideToggle("fast");
});
});
What I want to do:
$(this + "ul").slideToggle("fast");
I want to hide only ul.test li ul only.
what if?
$("ul.test li a").click(function(e){
$('ul', this).slideToggle("fast");
});
how will I go back to ul.test li using $('ul', this).slideToggle("fast");

Try this:
$("ul.test li").click(function(e){
$('ul', this).slideToggle("fast");
});
Demo: http://jsfiddle.net/9KAhT/
$("ul.test li a").click(function(e){
$(this).next().slideToggle("fast");
});

how about
$(this).find("ul").slideToggle("fast");
inside your click handler
EDIT:
maybe this will be of more use to you. http://api.jquery.com/category/traversing/tree-traversal/