On Jul 12, 5:19 pm, Ryan <rsechr...@stlmag.com> wrote: > Here is what I want to accomplish. I have a page with a structure like > this: > > <div id="jobs"> > <h2>Job Category Headline</h2> > <ul> > <li><span title="Show Position Details">Job Title 1</span> > <div class="job-info"> > Details > <div class="close" title="Hide Position Details">Hide Position > Details</div> > </div> > </li> > <li><span title="Show Position Details">Job Title 2</span> > <div class="job-info"> > Details > <div class="close" title="Hide Position Details">Hide Position > Details</div> > </div> > </li> > </ul> > </div> > > Each job-info div is hidden using this: > > $$('.job-info').invoke('hide'); > > So far so good. Now, I want to loop through all spans (#jobs ul li > span) and add a listener for click. When the span is clicked, the job- > info below it should display (just the one below, not all). In > addition, within each div there is another div with a class called > ".close" which should hide that parent div when clicked. > > It would appear that this is a simple task, but having never worked > with prototype, what I've tried so far hasn't worked. > > If anyone could point me in the right direction, I'd appreciate it. > You _could_ set an observer on each span, but it's _much_ better to set one on #jobs and delegate.
Something like (off the top of my head, so I'm sure it's not quite right, but it should give you the idea.) $('jobs').observe('click', function (e) { var span = e.findElement('span'); if (span) span.show(); }); If there are other spans than these, you could put a class on them and add it to the 'findElement' argument. > Thanks, > Ryan -- 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-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.