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();
});
});
Related
I'm try to display an item inside a list that has a class which is exactly the same ID on the other list. This would be activated when I click on the other list then it will find a match class on the other list then display it.
Here is the code I'm using basically the first list is in display:none;
List 2 is my menu on which in the list 1 would you like to display.
The first list should only have one visible item at a time.
Fiddle is here
HTML
<div id="gallery-container">
<li class="1723"><p>
123
</p></li>
<li class="1725"><p>
456
</p></li>
</div>
<ul id="gallery-list">
<li id="1723">
<strong>qwertyuiop</strong>
</li>
<li id="1725">
<strong>asdfghjkl</strong>
</li>
</ul>
SCRIPT:
$("#gallery-list li").click(function() {
alert(event.target.id);
$("#gallery-container li .wc-gallery").css("display", "none");
});
window.onload = function () {
$("#gallery-container li p").css("display", "none");
}
CSS:
#gallery-container li p {display:none;}
It's bad bad to use the same id in one HTML document. Never do this. Nobody likes that, jQuery doesn't like that. I don't like it. Try using a class or a data property.
But.. scratch that.. you are not really trying to do that. But still.. it's better to use a data property :)
Anyways, to accomplish this with a data property, you can do something like this:
html
<div id="gallery-container">
<li data-id="1723">
<p>
123
</p>
</li>
<li data-id="1725">
<p>
456
</p>
</li>
</div>
<ul id="gallery-list">
<li data-id="1723">
<strong>qwertyuiop</strong>
</li>
<li data-id="1725">
<strong>asdfghjkl</strong>
</li>
</ul>
js
$("#gallery-list li").click(function() {
var id = $(this).data('id');
$("#gallery-container").find('li').each(function() {
$(this).find('p').toggle($(this).data('id') === id);
});
});
jsfiddle
If you want to fetch the id of the list you clicked:
$("#gallery-list li").on("click", function() {
alert($(this).attr("id"))
$("#gallery-container li .wc-gallery").css("display", "none");
});
$('#gallery-list li').click(function() {
var targeeet = $(this).attr('id');
$('.' + targeeet).children().css('display', 'block');
});
Try this.
All you need is :
$('#gallery-list li').click(function() {
var target = $(this).attr('id');
$("#gallery-container li").hide();
$("#gallery-container li."+target).css('display', 'block');
});
Check the example below :
$('#gallery-list li').click(function() {
var target = $(this).attr('id');
$("#gallery-container li").hide();
$("#gallery-container li."+target).css('display', 'block');
});
#gallery-container li{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="gallery-container">
<li class="1723">
<p>
123
</p>
</li>
<li class="1725">
<p>
456
</p>
</li>
</div>
<ul id="gallery-list">
<li id="1723">
<strong>qwertyuiop</strong>
</li>
<li id="1725">
<strong>asdfghjkl</strong>
</li>
</ul>
Are you trying to do an accordion?
$("#gallery-container li").hide();
$("#gallery-list li").click(function() {
$("#gallery-container li").hide();
$("#gallery-container li."+this.id).show();
});
jsFiddle
I want to change color of menu item based on selection, for eg. In below code
there is a on class if any menu item is selected i have to append on class to
the li of menu.
$('ul.nav li a').click(function(e){
e.preventDefault();
$('.nav ul li').each(function () {
$(this).parents('.nav').find('.on').removeClass('on').end().end().addClass('on');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li class="on">
<a href="course_roadmap.php">
Opt1
</a>
</li>
<li>
<a href="course_roadmap.php">
Opt2
</a>
</li>
</ul>
Try this:
$('ul.nav li').click(function(e){
$(this).addClass('on').siblings().removeClass('on');
var anchortext = $(this).find('a').text();
e.preventDefault();
});
Try this
$('ul.nav li').click(function(){
$('ul.nav li').removeClass("on");
$(this).addClass("on");
});
I have a simple menu/accordion slider. I want to add the class="active" to the clicked link and slide down to show the UL. When another separate menu item is clicked then the active class should be removed from the previous element and added to the one just clicked. Also if the same is clicked when in active mode then the slider should slide up and remove the active class.
I've tried various configurations of the below but each time have problems getting the active class to be removed if the same is clicked to slide up. Any help is appreciated.
$(document).ready(function(menuSlide) {
$('li.menu-item-has-children a').click(function () {
if ($('li.menu-item-has-children a').hasClass('active')) {
$('li.menu-item-has-children a').removeClass('active');
}
else {
$(this).addClass('active');
}
$(this).next('ul').slideToggle();
$(this).parent().siblings().children().next().slideUp();
return false;
});
});
Update - have created a quick JSFiddle that demonstrates the problem, apologies for not doing on opening question. You can see that if same item is clicked to toggle the state remains active.
Since you want to support toggling, you should not remove active class from current element so
$(document).ready(function(menuSlide) {
var $as = $('li.menu-item-has-children a').click(function() {
$(this).toggleClass('active').next('ul').slideToggle();
$(this).parent().siblings().children('ul').slideUp();
$(this).parent().siblings().children('.active').removeClass('active');
return false;
});
});
.menu-item-has-children ul {
display: none;
}
a.active {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li class="menu-item-has-children">
<a>1</a>
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</li>
<li class="menu-item-has-children">
<a>1</a>
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</li>
<li class="menu-item-has-children">
<a>1</a>
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</li>
</ul>
We simply store the previous click div in a variable and then slide up that div on click :
var previousElement = 0;
$(document).ready(function(menuSlide) {
$('li.menu-item-has-children a').click(function () {
if ($('li.menu-item-has-children a').hasClass('active')) {
$('li.menu-item-has-children a').removeClass('active');
previousElement = 0;
}else {
$(this).addClass('active');
if(previousElement != 0) {
$(previousElement).removeClass('active');
$(previousElement).slideUp();
}
previousElement = this;
}
});
Easiest way is,
$(document).ready(function(){
$('li.menu-item-has-children .content').slideUp();
$(document).on('click','li.menu-item-has-children a',function(e){
e.preventDefault();
$this = $(this);
$('li.menu-item-has-children a').removeClass('active');
$this.addClass('active');
$('li.menu-item-has-children a').parent().find('.content').slideUp();
$this.parent().find('.content').slideDown();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<ul>
<li class="menu-item-has-children">
A
<div class="content">
AAAA AAAA AAAA
</div>
</li>
<li class="menu-item-has-children">
B
<div class="content">
BBBB BBBB BBBB
</div>
</li>
<li class="menu-item-has-children">
C
<div class="content">
CCCC CCCC CCCC
</div>
</li>
</ul>
</html>
In below example, i've worked same link click twice, please let me know if you are requesting this thing or not,
$(document).ready(function(menuSlide) {
$('li.menu-item-has-children a').click(function () {
console.log($(this).hasClass('active'));
if($(this).hasClass('active') == false)
{
if ($('li.menu-item-has-children a').hasClass('active')) {
$('li.menu-item-has-children a').removeClass('active');
}
else {
$(this).addClass('active');
}
$(this).next('ul').slideDown();
$(this).parent().siblings().children().next().slideUp();
}
return false;
});
});
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".
I'm building a simple dropdown where I'd like to add a class to parent if UL exists:
HTML:
<ul id="menu">
<li>Parent 1</li>
<li>Parent 2
<ul>
<li>Sub 2.1</li>
<li>Sub 2.2</li>
</ul>
</li>
</ul>
So I'd like to:
hide all nested (ul#menu > li > ul) ul's initially
show/hide nested ul on hover
addClass "dropdown" to parents that have nested ul's
This isn't quite working, not sure why:
$(function () {
$("ul#menu li").hover(function () {
$(this).addClass("hover");
$('ul:first', this).css('visibility', 'visible');
},
function () {
$(this).removeClass("hover");
$('ul:first', this).css('visibility', 'hidden');
});
$("ul#menu li ul li:has(ul)").find("a:first").addClass("dropdown");
});
Many thanks for your help!
var ul = $('#menu');
if (ul.length) {
ul.children('li').hover(function() {
$(this).children('ul').show();
}, function() {
$(this).children('ul').hide();
}).children('ul').hide().parent().addClass('dropdown');
}
Demo: http://jsbin.com/ofayu
BTW: you are closing the <li> tags incorrectly in your markup.
You wrote:
$("ul#menu li ul li:has(ul)")
Given your HTML structure, shouldn't this be:
$("ul#menu li:has(ul)")
This should do the trick (untested):
$('ul#menu > li > ul').each(function()
{
var list = $(this);
list.hide();
list.parent().hover(list.hide, list.show);
list.parent().parent().addClass('dropdown');
});