Results 1 to 4 of 4

Thread: toggle next/child div inside cell

  1. #1
    Join Date
    Apr 2009
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default toggle next/child div inside cell

    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.
    Last edited by Harvengure; 04-20-2010 at 01:11 AM. Reason: Resolved

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    Apr 2009
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thank you

    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:

    HTML Code:
    <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.

  4. #4
    Join Date
    May 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •