Strawberry Kitty wrote:
>
> I have 5 buttons at the top of a page, 2 of them are simple links to
> another page but the other 3 reveal a hidden div that slides in from
> the top of the page and pushes the content down.
>
> By default all divs are hidden. Clicking one button brings its
> corresponding div down, clicking this button again, takes it back up.
> Clicking another div, takes any open divs up and slides down that div.
> I hope that made sense :)
>
> My problem is that I can easily do this for 1 div as follows:
>
> $("a.misc").toggle(function(e) {
> $("#miscdiv").slideDown('fast')
> }, function(e) {
> $("#miscdiv").slideUp('fast')
> });
>
> but, obviously, if I do this for the other buttons, I get multiple
> divs open at the same time.
> I tried using addClass then doing a slideUp of all the divs with the
> added class but I get a "jack in the box" effect of divs going up and
> down. I guess these events should be queued in some way but I'm lost
> :)
>
I think your last comment hits the nail on the head - a queue. A simple
solution would involve a JavaScript array containing references to the
things that need to slide, and how they need to slide (up or down, depending
on how you want it to behave). Upon each click, the item and what it has to
do is added to a queue element, and then a call made to a function to
"execute" the queue (ie loop over it and do the appropriate slide for each
item).
This means that new items can be added to the queue if the user clicks
whilst an effect is happening. Of course you could amend this if you wish so
that a new click in the middle of an effect /cancels/ the effect and
replaces it with the new one. You may need to use a variable to ensure that
the queue is not executed whilst it is already executing, so it might get a
bit more complex than you intended.
Meanwhile there is loads of info on queues on the net, here is a simple one:
http://javascript.about.com/library/blqueue.htm
Bear in mind that if you are new to JS then the more involved stuff with (or
without) jQuery will necessarily involve learning some new syntax and
object-orientation etc.
--
View this message in context:
http://www.nabble.com/toggle-multiple-alternating-divs-tf3180113.html#a8824846
Sent from the JQuery mailing list archive at Nabble.com.
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
