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()
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 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
I am making a column list with some drop-down menus and I needed the Jquery for the drop-down to make it work.
I have found some Jquery for this but the problem is when you have two menus with ul and li, like this.
HTML:
<ul class="list-menu">
<li class="sort-menu">4</li>
<div class="sort-list-dropdown">
<ul class="sort-list">
<li>4</li>
</ul>
</div>
</ul>
When you duplicate this two times and then when you click the 4 on the class that says sort-menu, it will put up two menus containers and that class is sort-list-dropdown I have been playing with JS I got from somewhere and I'm getting confused about this issue.
JavaScript:
$("ul.list-menu > li").click(function () {
var X = $(this).attr('id');
if (X == 1) {
$("ul.sort-list > li").hide();
$(this).attr('id', '0');
} else {
$("ul.sort-list > li").show();
$(this).attr('id', '1');
}
});
//Mouse click on sub menu
$("ul.sort-list > li").mouseup(function () {
return false;
});
//Mouse click on my account link
$("ul.list-menu > li").mouseup(function () {
return false;
});
//Document Click
$(document).mouseup(function () {
$("ul.sort-list > li").hide();
$("ul.list-menu > li").attr('id', '');
});
I get some of the variables but I do not think it's the code. I think I need to input a new variable but I do not know what does it need for it.
If anybody knows how to accomplish this, then please reply back to me.
I have one answer for this problem. Please try this code below:
$(document).ready(function() {
$('.sort-list-dropdown').hide();
$('ul.list-menu li').click(function() {
$(this).next('.sort-list-dropdown').toggle();
});
});
In code 'click', you can change it to 'hover'.
Try something like this:
http://jsfiddle.net/SinisterSystems/bmwBr/5/
HTML:
<ul>
<li class="sec">Heading One</li>
<li><ul>
<li>Secondary</li>
<li>Secondary</li>
<li>Secondary</li>
<li>Secondary</li>
<li>Secondary</li>
<li class="sec">Heading Two</li>
<li><ul>
<li>Third</li>
<li>Third</li>
<li>Third</li>
</ul></li>
</ul></li>
<li class="sec">Heading One</li>
<li><ul>
<li>Secondary</li>
<li>Secondary</li>
<li>Secondary</li>
<li>Secondary</li>
<li>Secondary</li>
</ul></li>
</ul>
JS:
$(function(){
$('li.sec').on('click', function() {
$(this).next('li').slideToggle();
});
});
CSS:
ul li {
list-style:none;
}
.sec {
background:#efefef;
padding:25px;
font-size:24px;
}
Try something like this:
http://jsfiddle.net/SinisterSystems/bmwBr/5/
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".
Is it possible to show and hide partially with jquery sliding functions?
Basically, there's a list with 7 items. But only the 1st two are showing initially, while the rest is hidden. I want that when the user clicks to view more, all 7 items should show. And when he/she clicks again only the 1st two are showing and the rest is hidden again. But I can't manage to do it. Please give me some light, thanks.
jquery:
var ul = $('ul'),
showMoreLnk = $('a.show-more');
$('a').click(function(e){
if(ul.outerHeight() === 38){
ul.find('li.hide').removeClass('hide').addClass('show');
ul.slideDown(function(){
showMoreLnk.text('Show less');
});
} else {
ul.slideUp(function(){
showMoreLnk.text('Show more');
ul.find('li.show').removeClass('show').addClass('hide');
});
}
e.preventDefault();
});
HTML:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li class="hide">Item 3</li>
<li class="hide">Item 4</li>
<li class="hide">Item 5</li>
<li class="hide">Item 6</li>
<li class="hide">Item 7</li>
</ul>
show more
CSS:
.hide{
display: none;
}
.show{
display: block;
}
Try this:
$('a').click(function (e) {
e.preventDefault();
$('ul li.hide').slideToggle('slow');
});
Check this out.
http://sim.plified.com/2008/09/15/sliding-content-from-a-partial-height-with-jquery/
and the example:
http://sim.plified.com/jQuery/slide/#
Check out this code:
$('a.show-more').click(function (e) {
e.preventDefault();
var hidden_list = $('ul li.hide');
if (hidden_list.is(':hidden')) {
$(this).html("show less");
hidden_list.slideDown();
}
else {
$(this).html("show more");
hidden_list.slideUp();
}
});
I also created this for you to test in fiddle http://jsfiddle.net/Shanison/H4vbB/2/