Sorry for previous mail, I misclicked on send before finishing it. So : First try the examples for .slideUp()<http://docs.jquery.com/Effects/slideUp>and .slideDown() <http://docs.jquery.com/Effects/slideDown>. You'll notice slideUp() is a way to make an element disappear "as if" it was sliding up, and slideDown() is a way to make an element appear "as if" it was sliding down, as explained in the doc. That's not exactly what you're looking for apparently. What you are looking for is a way to move all the uls at once up or down.
Now if I wanted to do that, I'd do it this way : - in the div#calendar, put another div.slider that'll actually be moving wrapping the uls - through css give div#calendar a relative positionning so it'll be the offset parent for div.slider, give div.sider a relative positionning too so it'll also be an offset parent for the uls, make div#calendar overflow hidden so it'll act as a content window rather than get bigger to fit around the uls - on click on previous / next, detect current ul, get the previous / next ul, read it's position using .position()<http://docs.jquery.com/CSS/position>to determine how much sliding is needed for div.slider to slide it just right, then use .animate() <http://docs.jquery.com/Effects/animate> to trigger the slide Though there may very well already be plugins that do just what you need so check wether you will be re-inventing the wheel here. Michel Belleville 2009/11/10 Michel Belleville <michel.bellevi...@gmail.com> > First try the examples for > .slideUp()<http://docs.jquery.com/Effects/slideUp>and > .slideDown() <http://docs.jquery.com/Effects/slideDown>. You'll notice > slideUp() is a way to make an element disappear "as if" it was sliding up, > and slideDown() is a way to make an element appear "as if" it was sliding > down, > > Michel Belleville > > > 2009/11/10 Marco Barbosa <marco.barbos...@gmail.com> > > Hi all! >> >> So what I'm trying to do is so simple but it's not working.. >> All I want to do is to slide up/down to the next/previous content. >> >> Here's the code: >> <id="calendar"> >> <a href="#" class="arrowUp">Previous</a> >> <h3>Calendar</h3> >> <ul class="events current"> >> <li>Content1</li> >> <li>Content2</li> >> <li>Content3</li> >> </ul> >> <ul class="events"> >> <li>Content4</li> >> <li>Content5</li> >> <li>Content6</li> >> </ul> >> <ul class="events"> >> <li>Content7</li> >> <li>Content8</li> >> <li>Content9</li> >> </ul> >> <a href="#" class="arrowDown">Next</a> >> </div> >> >> Clicking arrow up down should bring up Content4, 5 and 6 and so on. >> >> Here's how I'm trying to do it: >> $('.arrowUp').click(function(){ >> $('.events.current').removeClass("current").previous().slideDown >> ("slow").addClass("current"); >> }); >> $('.arrowDown').click(function(){ >> $('.events.current').removeClass("current").next().slideUp >> ("slow").addClass("current"); >> }); >> >> the .events has display:none; >> and .events.current has display:block; >> >> What am I doing wrong? >> Is there a easier way to do this? >> > >
