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.

Reply via email to