Actually, let me revise that:

    function toggleContent(evt)
    {
        var elm;
        elm = evt.element();
        elm.next('div.bopCategoryDetails').toggle();
        elm.toggleClassName('expanded');
    }
    function initPage()
    {
        $$("ul.bopCategories li h3").each(function (elm) {
            elm.observe('click', toggleContent);
        });
    }
    Event.observe(document, 'dom:loaded', initPage);

The "dom:loaded" event is fired when the DOM is ready (before
window.onload, usually).
--
T.J. Crowder
tj / crowder software / com

On Oct 3, 10:34 am, "T.J. Crowder" <[EMAIL PROTECTED]> wrote:
> Hello Kris, and welcome!
>
> When I first started with Prototype, I sat down and read through the
> API docs from front to back.  It took about an hour (and I'm a slow
> reader), and was hugely useful -- so useful, in fact, that when I
> started reading this group (well, its predecessor) to gain further
> knowledge, I was actually able to answer some of people's questions.
>
> So as a first step, I would recommend doing that.  It'll literally
> take an hour for the first read-through, and I think you'll find that
> you'll learn a huge amount from it.
>
> I don't know jQuery at all, so I can't translate your jQuery to
> Prototype reliably, but it would probably look something like this:
>
>     function toggleContent(evt)
>     {
>         var elm;
>         elm = evt.element();
>         elm.next('div.bopCategoryDetails').toggle();
>         elm.toggleClassName('expanded');
>     }
>     $$("ul.bopCategories li h3").each(function (elm) {
>         elm.observe('click', toggleContent);
>     });
>
> E.g.:
>
> 1. Use $$ to select elements by CSS 
> rulehttp://prototypejs.org/api/utility/dollar-dollar
> 2. Use Enumerable.each to loop through the resulting 
> arrayhttp://prototypejs.org/api/enumerable/each
> 3. Hook the click event on an element with 
> Event.observehttp://prototypejs.org/api/event/observe
> 4. Find a following sibling according to a CSS rule via 
> Element.nexthttp://prototypejs.org/api/element/next
> 5. Toggle visibility with 
> Element.togglehttp://prototypejs.org/api/element/toggle
> 6. Toggle classname with 
> Element.toggleClassNamehttp://prototypejs.org/api/element/toggleClassName
>
> Although this could be done with nested closures instead of named
> function, I think a named function is both clearer and more efficient.
>
> HTH,
> --
> T.J. Crowder
> tj / crowder software / com
>
> On Oct 3, 10:11 am, Kris  Northfield <[EMAIL PROTECTED]>
> wrote:
>
> > Hi all,
> > Trying to get used to prtotype, I've written this code in jquery but
> > need a prototype equivalent. I've trawled the web for ages and read
> > pretty much a whole book (the Manning one with the turk on the front)
> > but I'm still none the wiser. Any help would be much appreciated. I've
> > got this html:
>
> > <ul class="bopCategories">
> >         <li>
> >                 <h3 class="expanded">Heading One</h3>
> >                 <div class="bopCategoryDetails">
> >                         Lorem ipsum dolor sit amet.
> >                 </div>
> >         </li>
> >         <li>
> >                 <h3 class="expanded">Heading Two</h3>
> >                 <div class="bopCategoryDetails">
> >                         Lorem ipsum dolor sit amet.
> >                 </div>
> >         </li>
> > </ul>
>
> > which I then toggle the showing/hiding of the <div>s when the <h3>s
> > are clicked with this jquery code:
>
> >                 $("ul.bopCategories li h3").click(function(){
>
> >                         
> > $(this).siblings("div.bopCategoryDetails").toggle("fast");
> >                         $(this).toggleClass("expanded");
>
> >                 });
>
> > How on earth do I do this with Prototype? So far I've only managed to
> > add an onclick event to every <h3> and pass the id of the specific
> > <div>. Like so:
>
> >         <h3 onclick="$('divvy2').toggle();">Event</h3>
> >         <div id="divvy2">
> >         Test test test test test test test test ets test test test test test
> >         </div>
>
> > Obviously this is going to get cumbersome when I have 20 or so list
> > items.
> > Thanks.
>
>
--~--~---------~--~----~------------~-------~--~----~
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 prototype-scriptaculous@googlegroups.com
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
-~----------~----~----~----~------~----~------~--~---

Reply via email to