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/
Related
I have a simple menu, and I want to do that when you click on the menu items to open a nested list. If you double-click then it must be opened and closed.
Html:
<ul class="menu">
<li class="has-child">Click here
<ul>
<li class="has-child">Click here
<ul>
<li>Level 3</li>
</ul>
</li>
<li>Level 2</li>
<li>Level 2</li>
</ul>
</li>
<li>Level 1</li>
<li>Level 1</li>
</ul>
jQuery:
$('li.has-child').on('click', function () {
var elem = $(this).children('ul');
if (elem.is(':hidden')) {
elem.slideDown(500);
} else {
elem.slideUp(500);
}
});
But when I click on a menu item in the second level, then the first is closed. Why is this happening and how to fix it?
[JSFiddle]
You need to stop the event from propagating from the parent to the child or vice-versa. You can use event.stopPropagation():
$('li.has-child').on('click', function (event) {
event.stopPropagation()
var elem = $(this).children('ul');
if (elem.is(':hidden')) {
elem.slideDown(500);
} else {
elem.slideUp(500);
}
});
you need to use stopPropagation
$(document).ready(function () {
$('li.has-child').on('click', function (event) {
event.stopPropagation();
var elem = $(this).children('ul');
if (elem.is(':hidden')) {
elem.slideDown(500);
} else {
elem.slideUp(500);
}
});
});
This then stops the click bubbling up to the parent li
Fiddle
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()
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");
});
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 nested unordered list.
<ul id="catalogue">
<li>List
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 1.1</li>
<li>Item 1.2
<ul>
<li>Item 1.2.1</li>
<li>Item 1.2.2
<ul>
<li>Item 1.2.2.1</li>
</ul>
</li>
<li>Item 1.2.3</li>
</ul>
</li>
<li>Item 1.3</li>
</ul>
</li>
<li>Item 3</li>
</ul>
</li>
</ul>
At the beginning only the very top level shows, but if you click on each LI, if there's a child UL in it, it should display the next lever, and so on. If you click on the same LI again, the level below should become hidden.
$(document).ready(function () {
$('#catalogue li').each(function () {
$(this).contents().first().wrap("<span/>")
});
$('#catalogue li > span').addClass('brd');
$('ul').hide();
$('#catalogue').show();
$('#catalogue li').click(function () {
var nxt = $(this).children('ul:first')
if ($(nxt).is(":visible")) {
$(nxt).slideUp();
} else {
$(nxt).slideDown();
}
$(this).parent().show();
});
});
If a user clicks on a sibling LI and it has a child UL, that UL should show but any sibling's ones should close.
You need to stop the event from propagating to the parent. Clicking on each li will invoke its own click handler and the event will propagate to its parent li invoke its handler and so on. So you can just stop it at one level by using event.stopPropagation(). And you can use slideToggle to toggle the current state of the element.
Try:
$('#tree li').click(function (e) {
e.stopPropagation();
$(this).children('ul:first').slideToggle();
});
Demo
And if you want to slide up while clicked on its sibling then,
$('#tree li').click(function (e) {
e.stopPropagation();
var $this = $(this);
$this.children('ul:first').slideToggle().end()
.siblings().children('ul:visible').slideUp();
//Code Broken down
//$this.children('ul:first').slideToggle();
//$this.siblings().children('ul:visible').slideUp();
});
Demo