[jQuery] Show/Hide divs beginning with a specified string
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