jquery - SlideToggle and li - repeated clicking reorder the list -
after clicking on li item in ul list - items show/hide except 1 clicked. try nice animations using slidetoggle. repeatedly clicking on same item list, change order of list.
html :
<ul class="imp"> <li style="background: hotpink;">1</li> <li style="background: lightgreen;">2</li> <li style="background: lightblue;">3</li> <li style="background: bisque;">4</li> <li style="background: pink;">5</li> <li style="background: wheat;">6</li> </ul>
jquery
$('li').click(function () { if ($(this).closest('ul').find('li').is(':hidden')) { $(this).prependto(".imp").fadein("slow"); } $(this).closest('ul').find('li').not($(this)).slidetoggle("slow", function () { if ($(this).closest('ul').find('li').is(':hidden')) { $(this).prependto(".imp"); } }); });
css
ul{ list-style: none; } li { cursor: pointer; width: 100px; background-color: red; text-align: center; height: 25px; }
why using prependto
method ?
it alters dom , why happening..
if remove 2 prependto
lines work want..
demo at http://jsfiddle.net/rjhfw/1/
and simplify code just
$('li').click(function () { $(this).siblings().slidetoggle('slow'); });
demo at http://jsfiddle.net/rjhfw/2/
update (after comment)
you can prependint after animation complete
here code (with checks thrown in)
$('li').click(function () { var self = $(this), siblings = self.siblings(), count = siblings.length, show = siblings.is(':hidden'), inprogress = siblings.is(':animated'); // break if animation still in progress if (inprogress) return; // slidetoggle // , change position after animation complete siblings.slidetoggle('slow', function(){ count--; if( count === 0 && !show){ self.prependto('.imp'); } }); });
demo at http://jsfiddle.net/rjhfw/4/
Comments
Post a Comment