The solution by WoolyNinja works great, with a change of the line:
$("div[id^='showhide_']").click(function(){
to:
$("img[id^='showhide_']").click(function(){
as it is the image that I wanted to capture the click event for.
It could not be done by show/hide classes in a simple way as there
will be more than 2 employees listed.
The problem would still be how to select the particular row related to
the button, selecting by classes would end up hiding multiple rows in
one go, which is not what is required.
Anyway, I have a solution that works well now.
Thank you for your help.
Adam
On Jun 24, 11:46 pm, DaveG <[EMAIL PROTECTED]> wrote:
> Since you're already using css to show/hide, then why not apply a class
> to the shown/hidden rows, and select on that instead?
>
> Thus, for hidden rows apply the class "hide_row", which will include the
> css required to hide the row, and apply "show_row" on those rows you
> want displayed.
>
> ~ ~ Dave
>
>
>
> Adam wrote:
> > Hi,
>
> > I have a system where data is placed in a div, using AjaxSubmit to a
> > php page, in the below format.
>
> > {Employee Name1} {Date Mon} {Date Tue} {Date Wed} {Date Thu} {Date
> > Fri}
> > {Job Mon1} {Job Tue1} {Job Wed1} {Job
> > Thu1} {Job Fri1}
> > {Job Mon2} {Job Tue2} {Job Wed2} {Job
> > Thu2} {Job Fri2}
> > {Employee Name2} {Date Mon} {Date Tue} {Date Wed} {Date Thu} {Date
> > Fri}
> > {Job Mon1} {Job Tue1} {Job Wed1} {Job
> > Thu1} {Job Fri1}
> > {Job Mon2} {Job Tue2} {Job Wed2} {Job
> > Thu2} {Job Fri2}
>
> > As more employees are added I would like to be able to collapse the
> > job information for employees I click on using css.
> > i.e.
> > {Employee Name1}[-] {Date Mon} {Date Tue} {Date Wed} {Date Thu} {Date
> > Fri}
> > {Job Mon1} {Job Tue1} {Job Wed1} {Job
> > Thu1} {Job Fri1}
> > {Job Mon2} {Job Tue2} {Job Wed2} {Job
> > Thu2} {Job Fri2}
> > {Employee Name2}[+]
>
> > etc where [-] is a button to hide employee1's jobs and [+] is a button
> > to show employee2's jobs.
>
> > I could do this by putting different inline javascript functions into
> > the formatted data that is returned from the php page, however I would
> > prefer to use jQuery and put everything in the HEAD of the container
> > page.
>
> > The current template for the above data is:
>
> > <div class="diary_engineer_week">
> > <div class="diary_engineer_name">{EngineerName}<img
> > id="showhide_{EngineerShortName}" src="images/Apr08Design/
> > plus_button_new.png" alt="Show or Hide" /><br/>{NumberJobs} Job(s)</
> > div>
> > <div id="block_{EngineerShortName}">
> > <div class="diary_day1"><div class="diary_header">{day1}</
> > div>{job1}</div>
> > <div class="diary_day2"><div class="diary_header">{day2}</
> > div>{job2}</div>
> > <div class="diary_day1"><div class="diary_header">{day3}</
> > div>{job3}</div>
> > <div class="diary_day2"><div class="diary_header">{day4}</
> > div>{job4}</div>
> > <div class="diary_day1"><div class="diary_header">{day5}</
> > div>{job5}</div>
> > <div>
> > </div>
>
> > I want to create some jQuery code which when any show/hide button with
> > an id beginning with "showhide" is clicked, the corresponding div with
> > id="block_{EngineerShortName}" is shown or hidden using css.
>
> > The trouble is how do I select something in jQuery where the id begins
> > with something?
> > Also, how do I then hide the "corresponding" div?
>
> > Would this be possible using a parent-child relationship if I used
> > <div id="block_{EngineerShortName}"> as a child of a engineer_week
> > div?
>
> > Thank you for any help,
>
> > Adam Sykes- Hide quoted text -
>
> - Show quoted text -
