toggle next/child div inside cell

[Harvengure]

Hello once again,

Perhaps yet another 'noobie' question but I, for the life of me, have had no luck trying to get it to work myself.

Ideally I am searching for a piece of jquery that will make it so that whenever I click on a table cell on a page it toggles the hidden div within that cell.

I've been able to get the desired results with code where I assign a unique id or class to each corresponding trigger and div but the hope is to not have to have an extra 150 lines of code covering every unique id/class and then having to scour it every tame I want to add or delete a new row.

Thank you in advance for any help in even pointing me in the right direction or perhaps explaining the correct selector.

[djr33]

It is possible to find the 'coordinates' of a table cell. For example:
this.cellIndex,this.parentNode.rowIndex
(this is a cell that you clicked.)

That means you can automatically get an 'id' for the cell. The div will be a lot harder.

I can think of three ways to try this:
1. Just assign each div (manually if you must) an id like 'col2row3' or just '2-3' etc.
2. Dynamically generate the table and the divs assigning each an id like above.
3. If you can, you can somehow find the parent of the div and use it's [the cell's] coordinates to assign an id dynamically. This could be done as an 'onload' process or perhaps when clicked depending on how the order works. The problem I see is that you can't click a hidden div, so that would get complex. You could also try to find the cell's child divs and go from there.


Once you have that all setup, it's easy enough to work through it.

[Harvengure]

Yeah, by the time I have got here and realized you had answered I had already figured it out. Turns out I was making it way too complicated. That and I changed something that was apparently breaking it before as it now works as expected. I ended up using this:


<script type="text/javascript">
$(document).ready(function() {
$("tr").click(function(){
$(this).find("div").fadeSliderToggle()
return false;
})
});
</script>

Thank you very much though for being the second person ever to answer any of my questions. ^.^ It was becoming disheartening not to receive any any replies at all.

[Seebazz]

ok so I have almost the same question as Harvengure, it would be really helpful if someone could post a working example of the script in action. Thanks