Scriptaculous Effects Question: Expanding

Greetings,
I have an effect that I desire to accomplish but I am unsure
of just
how to accomplish it.  Here is the basic idea of what I am
trying to
do: Have an unordered list with two list elements.  Upon
clicking on a
link,
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the
Google Groups "Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffsgooglegroups.com
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribegooglegroups.com
For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=
en
-~----------~----~----~----~------~----~------~--~---

Woops! Clicked enter by mistake...

Greetings,
I have an effect that I desire to accomplish but I am unsure
of just
how to accomplish it.  Here is the basic idea of what I am
trying to
do: Have an unordered list with two list elements.  Upon
clicking on a
link, I want the list to grow to be 6-10 elements long (the
original 2
plus 4-8 more), and upon clicking on another link having it
shrink
back to the original 2 elements.  Actually fiddling with a
single UL
is not critical, so if there is another way to accomplish
this then
that would be fine too.

I have a current working idea, but I want to know if there
is some
simpler way of accomplishing this that I am missing:

<not valid HTML>
<div id=wrapper>
  <div id=1>
    List Element 1
    List Element 2
  </div>
  <div id=2>
    List Element 3
    List Element 4
  </div>
</div>
</not valid HTML>

I am thinking about making div 1 static and visible on page
load and
then blinding div 2 to make the rest of the elements
appear/
disappear.  The only issue I have is making sure it looks
pretty: it
has to look like a single list after div 2 blinds down
meaning the
spacing has to be the same between elements and that div 1's
border
bottom must disappear/reappear upon bliding div 1.

I hope this made some sense, I will do my best to answer any
questions
about my goals.  If anyone has any examples, or suggestions
of a
better way of accomplishing this that would be fantastic.

Thanks!

-Gadi

On Jan 2, 10:44 pm, Gadi <pdxplo...gmail.com> wrote:
> Greetings,
> I have an effect that I desire to accomplish but I am
unsure of just
> how to accomplish it.  Here is the basic idea of what I
am trying to
> do: Have an unordered list with two list elements. 
Upon clicking on a
> link,
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the
Google Groups "Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffsgooglegroups.com
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribegooglegroups.com
For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=
en
-~----------~----~----~----~------~----~------~--~---

Gadi wrote:

 > I have an effect that I desire to accomplish but I am
unsure of just
 > how to accomplish it.  Here is the basic idea of what
I am trying to
 > do: Have an unordered list with two list elements. 
Upon clicking on a
 > link, I want the list to grow to be 6-10 elements long
(the original 2
 > plus 4-8 more), and upon clicking on another link
having it shrink
 > back to the original 2 elements.  Actually fiddling
with a single UL
 > is not critical, so if there is another way to
accomplish this then
 > that would be fine too.

You don't need Scriptaculous for that. Plain old Prototype
is enough.

Try something like this:

HTML:
   <ul class="abbreviated"
id="myul">
     <li>Whatever 1</li>
     <li>Whatever 2</li>
     <li class="hidden">Whatever
3</li>
     <li class="hidden">Whatever
4</li>
     <li class="hidden">Whatever
5</li>
     <li class="hidden">Whatever
6</li>
     <li class="hidden">Whatever
7</li>
     <li class="hidden">Whatever
8</li>
     <li class="hidden">Whatever
9</li>
     <li class="hidden">Whatever
10</li>
   </ul>

CSS:

   ul.abbreviated li.hidden {
     display: none;
   }

JAVASCRIPT:

   $('myul').onclick = ExpandList;

   function ExpandList() {
     this.toggleClassName('abbreviated');
   }

Just a quick idea. I haven't actually tested it.
But basically it should work.

-- 
Bertilo Wennergren <http://bertilow.com>

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the
Google Groups "Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffsgooglegroups.com
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribegooglegroups.com
For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=
en
-~----------~----~----~----~------~----~------~--~---