Have a look over at Scripteka.com -- the canonical repository for all
things Prototype extension-shaped. There are loads of different ways
to skin this cat, including writing your own long-hand. I think it
takes maybe 12 lines of script if you space it out and make it all
purty.
For this structure:
<div id="outer">
<h3>First segment</h3>
<div class="inner">
<p>First segment's content here.</p>
</div>
...
<h3>Last segment</h3>
<div class="inner">
<p>Last segment's content here.</p>
</div>
</div>
You could do this:
//include just prototype.js in your page head
//roll up all but the first one
var bodies = $$('.inner');
bodies.invoke('hide').first().show();
$('outer').select('h3').invoke('observe','click',function(evt){
//if you want only one to be open at a time:
bodies.invoke('hide');
this.next('div').show();
});
If you link the Scriptaculous Effects library into your page after
Prototype, then you can animate the transition thus:
$('outer').select('h3').invoke('observe','click',function(evt){
//if you want only one to be open at a time:
bodies.findAll(function(elm){return elm.visible();}).invoke('slideUp');
this.next('div').slideDown();
});
That's all untested but it should get you nearly there.
Walter
On Mar 28, 2010, at 7:33 PM, Hariz Soleminio wrote:
Hi Guys,
hmmm.... i've wondering if there is such an easy way to use
accordion in prototype guys?
is there such plugins addons for prototype?
Or should i used the scriptacolous 2 and use Effect.SlideUp effect?
Thanks Prototype Fans...
Connect instantly with more friends on your blog and personal
website? Create your latest Pingbox today! http://ph.messenger.yahoo.com/pingbox
--
You received this message because you are subscribed to the Google
Groups "Prototype & script.aculo.us" group.
To post to this group, send email to [email protected]
.
To unsubscribe from this group, send email to [email protected]
.
For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en
.
--
You received this message because you are subscribed to the Google Groups "Prototype
& script.aculo.us" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
