I need to create a toggle that animates upwards not downwards in other words the reverse of the "normal" toggle. Perhaps simpler is the toggle should slide up above the menu item (it's a menu) to become visible rather than slide down as the normal slideToggle etc. would do. I am nearly there with this :
var opened = false;
$("#coltab li").click(function(){
if(opened){
$(this).children('ul').animate({"top": "+=300px"});
} else {
$(this).children('ul').animate({"top": "-=300px"});
}
$(this).children('ul').children().slideToggle('slow');
$(this).children('ul').toggle();
opened = opened ? false : true;
});
BUT if you "toggle" an item THEN another item the second item (slides down) falls by the 300px NOT slide up (raises) by 300px. A good example (hate the site) of what I want to achieve is http://market.weogeo.com/#/home and the "tabs"at the bottom.
My HTML code is using
<ul id="#coltab">
<li>Item 1
<ul>
<li>This bit needs to toggle up</li>
</ul>
</li>
<li>Item 2
<ul>
<li>This bit needs to toggle up</li>
</ul>
</li>
etc ...
</ul>
On the CSS side
ul#coltab { position: relative' blah; blah; }
and
ul#coltab ul { display: none; position: absolute; blah; blah; }
Any ideas?
It would be nice if each "click" closed the previous toggle before opening the "clicked" toggle.
I could give a more specific answer if you would have provided the actual CSS for your lists instead of filler.
Basically, you'll want to set the bottom
property of ul#coltab ul
to 0
.
Generic example: http://jsfiddle.net/s7AD8/
ul#coltab ul {
position:absolute;
bottom:0;
/*...and so on*/
}
This will cause it to animate in an upward direction.
Try this one:
$("#coltab li ul").each(function (index) {
$(this).data('height', $(this).outerHeight());
});
$("#coltab li").click(function () {
$("#coltab li ul.open").animate({"top": 0}, function () {
$(this).removeClass('open');
});
var itemHeight = $(this).children('ul').data('height');
$(this).find('ul:not(.open)').animate({"top": -itemHeight}).addClass('open');
});
And add a new css class:
#coltab ul.open { display: block; }
Test it here
"-=300px" would feel better being a precalculated var.. (Can you even handle calculations in strings?)
Further if you wish to manipulated them independently I'd imagine you'll have a much easier time by providing IDs for the parts you want to handle
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With