CODEWITHSUNDEEP
jquery
Blackcoil
Blackcoil

Reputation: 175

how to use JQuery "toggle" with parameters?

I have a table like this:

<table>
  <tr>
    <td><input type="button" title="Toggle" value="Show" id="btn534534" class="toggle" />    </td>
    <td>some data about ID 534534</td>
  </tr>
  <tr id="row534534" class="hiddenRow">
    <td colspan="2">some hidden data about ID 534534 that must show/hide with toggle</td>
  </tr>
  <tr>
    <td><input type="button" title="Toggle" value="Show" id="btn2423434" class="toggle" /></td>
    <td>some data about ID 2423434</td>
  </tr>
  <tr id="row2423434" class="hiddenRow">
    <td colspan="2">some hidden data about ID 2423434that must show/hide with toggle</td>
  </tr>
  <!-- many more rows here -->
</table>

There are MANY "sets" of rows like the above. One row of the table is visible for each "set" of rows. The second row with class "hiddenRow" is hidden on page load by JQuery like this:

$("tr.hiddenRow").hide();

Now I want each button to toggle visibility of the row immediately after it. Note that the INPUT in the visible row, and the TR of the hidden row share a unique ID. I want to have the button onclick call a JQuery function and pass the ID so that JQuery knows which row to toggle.

Any ideas? I can't find any examples of this online.

Upvotes: 1

Views: 7729

Answers (4)

Šime Vidas
Šime Vidas

Reputation: 185923

I prefer @Nathan's solution, but if the DOM relationship would become more complicated, you would do it like so:

$('#tableID input.toggle').click(function() {
    $('#row' + this.id.replace('btn', '')).toggle();
});

Live demo: http://jsfiddle.net/pHKat/1/

Update: The same thing as above, but using event delegation: 

$('#tableID').click(function(e) {
    if (!$(e.target).hasClass('toggle')) { return; }
    $('#row' + e.target.id.replace('btn', '')).toggle();
});

This code has one additional line of code, but performance-wise, this code is better, since only one event handler is bound (to the table element). For comparison, my original solution (above) binds one event handler per each button.

Upvotes: 1

Chris Moschini
Chris Moschini

Reputation: 37957

My first suggestion when you say:

"MANY ... hidden on page load" is that you're using Javascript to do CSS's job, and it's either already causing or going to cause you a performance problem. Define:

tr.hiddenRow {
    display: none;
}

in your stylesheet, and get rid of the on page load code.

I'd use the following to implement your button code:

$('input.toggle').live('click', function(ev) {
    var id = this.id.substr(3);
    var row = $('#row' + id);
    if (row.hasClass('hiddenRow'))
        row.removeClass('hiddenRow');
    else
        row.addClass('hiddenRow');
});

If row IDs aren't necessary for other functions, you could reduce the size of your HTML by getting rid of the ID on both the input and the tr, then implement toggle with DOM-walking:

$('input.toggle').live('click', function(ev) {
    var row = $(this).parents('tr').next('tr');
    if (row.hasClass('hiddenRow'))
        row.removeClass('hiddenRow');
    else
        row.addClass('hiddenRow');
});

Edit: Hadn't come across jsfiddle before - that's sort of fun. Here you go: http://jsfiddle.net/z6rAe/

Updating again to include my corrections to Šime's answer - why doesn't StackOverflow do code in comments?

$('#tableID').click(function(ev) {
    if (!$(ev.target).hasClass('toggle')) { return; }
    $(ev.target.id.replace('btn', '#row')).toggle();
});

http://jsfiddle.net/7Dy5s/3/

Upvotes: 0

Nathan Taylor
Nathan Taylor

Reputation: 24606

This should do the trick:

$(document).ready(function() {
    $(".toggle").click(function() {
        $(this).closest('tr').next('tr.hiddenRow').toggle(); 
    });
});

http://jsfiddle.net/DU8rd/1 (Thanks Šime Vidas)

Note: This doesn't pass the ID as you indicated, but it does create the behavior you described.

Upvotes: 3

NerdFury
NerdFury

Reputation: 19214

use a custom method like this one:

    <script type="text/javascript">
        function viewToggle(id){
            $('#'+id).slideToggle(500);
        }
    </script>

And then have each button call the function above passing in the value of the id you would like to toggle the view of:

<table>
  <tr>
    <td><input type="button" onclick="viewToggle('row534534');" title="Toggle" value="Show" id="btn534534" class="toggle" />    </td>
    <td>some data about ID 534534</td>
  </tr>
  <tr id="row534534" class="hiddenRow">
    <td colspan="2">some hidden data about ID 534534 that must show/hide with toggle</td>
  </tr>
  <tr>
    <td><input type="button" onclick="viewToggle('row2423434');" title="Toggle" value="Show" id="btn2423434" class="toggle" /></td>
    <td>some data about ID 2423434</td>
  </tr>
  <tr id="row2423434" class="hiddenRow">
    <td colspan="2">some hidden data about ID 2423434that must show/hide with toggle</td>
  </tr>
  <!-- many more rows here -->
</table>

Upvotes: -2

Related Questions