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.

jsfiddle example

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

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

rewrite - Trouble with Wordpress multiple custom querystrings -