Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Nov 2012
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Modifying a row toggle script?

    Hi,

    I'm using the following javascript to perform a row toggle effect, which is working fine

    $(document).ready(function() {
    \$('table.detail').each(function() {
    var \$table = \$(this);
    \$table.find('.parent').click(function() {
    $(this).nextUntil('.parent').toggle(); // must use jQuery 1.4 for nextUntil() method
    });

    var \$childRows = \$table.find('tbody tr').not('.parent').hide();
    \$table.find('button.hide').click(function() {
    \$childRows.hide();
    });
    \$table.find('button.show').click(function() {
    \$childRows.show();
    });
    });
    });


    The issue is that I would like only certain cells of the html row that I click on to hide/show the row below. So say cells 1 - 3 will expand it but cells 4 - 8 will not expand it. I've been searching on how to do this but haven't had much luck and my javascript knowledge is terrible!

    I'd also like to include an 'arrow' feature that changes when cell is clicked to show that it can be expanded or contracted in one cell. I could probably do that myself at a stretch but if anyone has a quick insight into a way they'd recommend I'd appreciate it. I have found the following HTML code (&#x25B6) that will help but not sure if I should be using .gifs etc

    The HTML table for working with the javascript above uses this format to activate it.

    <table class=\"detail\">
    <tr class=\"parent\"><td>my parent</td>
    <tr class="child"><td>my child</td>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,598
    Thanks
    24
    Thanked 646 Times in 645 Posts
    happybanana please use the hash mark = # and not the #i to show your code. It doesn't hurt here, but it could in the future.

    Why all the single slashes? ex: var \$table = \$(this);

  • #3
    New Coder
    Join Date
    Nov 2012
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Apologies sunfigther, I'll re-edit.

    The \'s are because I'm using PHP to present the javascript. PHP would interpret these as PHP variables until I escaped them.

    The code works fine if I want to click on any cell of a parent row, whereas I just want to be able to click on particular cells in the parent row and not the entire row.

    {note: hmm can't seem to re-edit the original post!}
    Last edited by happybanana; 01-29-2013 at 08:44 AM.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,598
    Thanks
    24
    Thanked 646 Times in 645 Posts
    In your post you should see in the bottom right a black button with EDIT in it. That should do it for you.

    I don't know why your using PHP to write out the page or the javascript, but look into heredoc in PHP.

    Fast table with the first and last <td> show/hiding the middle row.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function toggle() {
     if( document.getElementById("hidethis").style.display=='none' ){
       document.getElementById("hidethis").style.display = '';
     }else{
       document.getElementById("hidethis").style.display = 'none';
     }
    }
    </script>
    </head>
    <body>
    
    <table border="1">
    <tr>
    	<td onclick="toggle();">Always visible</td>
    	<td>Always visible</td>
    	<td>Always visible</td>
    </tr>
    
    <tr id="hidethis">
    	<td>Hide this</td>
    	<td>Hide this</td>
    	<td>Hide this</td>
    </tr>
    
    <tr>
    	<td>Always visible</td>
    	<td>Always visible</td>
    	<td onclick="toggle();">Always visible</td>
    </tr>
    
    </table>
    </body>
    </html>


  •  

    Posting Permissions

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