display block with event target id - javascript

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

Related

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();
});
});

How to toggle using JQuery

I have an accordion, and I'm able able to open on each click, but how can I close it back again?
HTML:
<ul class="accordion">
<li id="one" class="files">
Calendar 1<span>10</span>
<ul class="sub-menu">
<li><em>01</em>Sub Menu<span>1</span></li>
</ul>
</li>
<li id="two" class="mail">
Calendar 2<span>20</span>
<ul class="sub-menu">
<li><em>01</em>Sub Menu<span>2</span></li>
</ul>
</li>
<li id="three" class="cloud">
Calendar 3<span>30</span>
<ul class="sub-menu">
<li><em>01</em>Sub Menu<span>3</span></li>
</ul>
</li>
<li id="four" class="sign">
Calendar 4
<ul class="sub-menu">
<li><em>01</em>Sub Menu</li>
</ul>
</li>
</ul>
Javascript:
$(document).ready(function() {
// Store variables
var accordion_head = $('.accordion > li > a'),
accordion_body = $('.accordion li > .sub-menu');
// Open the first tab on load
accordion_head.first().addClass('active').next().slideDown('normal');
// Click function
accordion_head.on('click', function(event) {
// Disable header links
event.preventDefault();
// Show and hide the tabs on click
if ($(this).attr('class') != 'active') {
$(this).next().stop(true,true).slideToggle('normal');
$(this).addClass('active');
}
});
});
Fiddle: http://jsfiddle.net/fuuLh494/
You dont need to explicitly check for active class occurence and then do add/remove decision of class. You can achieve this with toggleClass:
accordion_head.on('click', function(event) {
event.preventDefault();
$('.sub-menu').not($(this).next()).slideUp('normal').prev().removeClass('active');
$(this).next().stop(true,true).slideToggle('normal');
$(this).toggleClass('active');
});
Working Demo
You can remove the if completely, and use both slideToggle and toggleClass:
$(this).next().stop(true,true).slideToggle('normal');
$(this).toggleClass('active');
Updated Fiddle
if ($(this).attr('class') != 'active'){
//accordion_body.slideUp('normal');
$(this).next().stop(true,true).slideToggle('normal');
//accordion_head.removeClass('active');
$(this).addClass('active');
} else {
$(this).next().stop(true,true).slideToggle('normal');
$(this).removeClass('active');
}
See the updated fiddle here: http://jsfiddle.net/9ev31v6w/
The best you can do with a tutorial is learn, and not copy&paste without read the code. It's as simple as this:
http://jsfiddle.net/fuuLh494/1/
I add else statement at the end of the script:
else {
$(this).next().stop(true,true).slideToggle('normal');
$(this).removeClass('active');
}
Replace all instances of addClass with toggleClass and remove the condition of if class is active.
We are trying to remove the class when the class is already added using toggleClass() and don't need any if condition block.
accordion_head.first().toggleClass('active').next().slideDown('normal'); // Changed
if ($(this).attr('class') != 'active') { } // Removed
$(this).toggleClass('active'); // Changed
Working JSfiddle

Issue targeting specific selector jquery in dropdwon menu

I have a drop down menu with jquery and I want to modify some text in different way depending on what is selected in the drop down menu.
The drop down menu works.
Html code:
<div>
<ul class="myMenu">
<li>Choose your location
<ul>
<li id="op1">option1</li>
<li id="op2">option2</li>
<li id="op2">option3</li>
</ul>
</li>
</ul>
</div>
<div>
<h1 id="text_to_change">Welcome to blabla</h1>
</div>
Javascript code:
$(document).ready(function() {
$('.myMenu li ul li').click( function(event){
$(document).find('#text_to_change').css('visibility', 'visible');
$('.myMenu').hide();
if ($(this) == '#op1'){
$('#text_to_change').text("text changed");
}
if ($(this) == '#op2'){
$('#text_to_change').text("text changed differently");
}
else{
$('#text_to_change').text("text changed differently again");
}
});
});
Why does ($(this) == '#op1') not work?
You are trying to compare a jquery object $(this) with a string #op1
To get the id of the element use:
$(this).attr('id');
It will give you the id of the element without the #
Also i think your second if needs to be an else if { ...
$(document).ready(function() {
$('.myMenu li ul li').click( function(event){
console.log($(this).attr('id'), $(this).prop('id'));
$(document).find('#text_to_change').css('visibility', 'visible');
$('.myMenu').hide();
if ($(this).attr('id') == 'op1'){
$('#text_to_change').text("text changed");
}
else if ($(this).attr('id') == 'op2'){
$('#text_to_change').text("text changed differently");
}
else{
$('#text_to_change').text("text changed differently again");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div>
<ul class="myMenu">
<li>Choose your location
<ul>
<li id="op1">option1</li>
<li id="op2">option2</li>
<li id="op2">option3</li>
</ul>
</li>
</ul>
</div>
<div>
<h1 id="text_to_change">Welcome to blabla</h1>
</div>
This two item must not share the same id 'op2'
<li id="op2">option2</li>
<li id="op2">option3</li>

Check each listview attribute in jquery

I have listview such like this:
<ul data-role="listview" id="listorder">
<li data-table='1'>menu a</li>
<li data-table='2'>menu b</li>
<li data-table='1'>menu c</li>
<li data-table='2'>menu d</li>
<li>spacer<li>
<li data-table='1'>menu e</li>
<li data-table='2'>menu f</li>
<li data-table='3'>menu g</li>
<li data-table='4'>menu h</li>
</ul>
I want to check all element in listorder and filter listorder that only display contain attribute data-table='1' and hide other li. First it will display all element, when user click a link table 1 from other link, it will filter listorder. when user click a link to display all, listorder will display all li, no filter.
how to do that in jquery?
Thank you all.
Thanks to #RGS my final code become:
$('#tabletab').off('tap', 'a').on('tap', 'a', function() {
tablepick = $(this).attr('data-table');
$('ul#listorder > li').hide();
if (tablepick=='0') $('ul#listorder > li').show();
$('#listorder li').filter('[data-table="'+tablepick+'"]').show();
});
$('.filter').click(function(){
$('ul#listorder > li').each(function(index){
if($(this).data('table')==1){
$(this).show();
}
else
{
$(this).hide();
}
});
});
$('.link').click(function(){
$('ul#listorder > li').show();
});
Demo:
http://jsfiddle.net/5c4tj/3/
Working Demo
Try this,
$('#filter').click(function () {
$('#listorder li').each(function () {
if ($(this).data('table') !== 1) {
$(this).hide();
}
});
});
OR Just
$('#filter').click(function () {
$('#listorder li').each(function(){
$(this).toggle($(this).data('table') == 1);
});
});
Demo
References :
.each() - Alternative you can use .filter()

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".

Categories

Resources