I have a table:

<table>
  <tr class="row">
    <td>
        Click me! 
        <span class="expand" style="display: none;">Hidden text</span>
    </td>
  </tr>

  <tr class="row">
    <td>
        Click me! 
        <span class="expand" style="display: none;">Hidden text</span>
    </td>
  </tr>
</table>

The idea being that each row can be clicked, and clicking the row will reveal the hidden span in the cell. Here's the jQuery I've been trying:

$("#row").click(function () {
    $(this).class(".expand").style = "";
});

I am using $(this) because there are many spans of the same class and I only want to expand the span within the clicked row.

I have a table:

<table>
  <tr class="row">
    <td>
        Click me! 
        <span class="expand" style="display: none;">Hidden text</span>
    </td>
  </tr>

  <tr class="row">
    <td>
        Click me! 
        <span class="expand" style="display: none;">Hidden text</span>
    </td>
  </tr>
</table>

The idea being that each row can be clicked, and clicking the row will reveal the hidden span in the cell. Here's the jQuery I've been trying:

$("#row").click(function () {
    $(this).class(".expand").style = "";
});

I am using $(this) because there are many spans of the same class and I only want to expand the span within the clicked row.

• javascript
• jquery
• html
• css
• expand

• api.jquery./category/traversing – Jason P Commented Jan 22, 2014 at 16:18
• Use the css method in the answers below. Also, isn't a class supposed to be ".row" instead of "#row"? – Uxonith Commented Jan 22, 2014 at 16:20

4 Answers 4

$(".row").click(function () {
    $(this).find("span.expand").show(); //Shows specific span for each row
});

Note: #row is wrong since row is a class. Use .row

This should sort you out :

jQuery:

$('.row').click(function(){
    $(this).find('span').show();
});

*Note that each row has a class of 'row' so the element is '.row' not '#row' (which would refer to an ID of 'row')

Use .css() to set style via jQuery

$(".row").click(function () {
    $(this).find(".expand").css('color','red');
    //to show use
    $(this).find(".expand").show();
});

.find()

Also read

css with jQuery

Use this code...

$('.row').click(function(){      // row is class not id
     $(this).find('span').show();
});

If you want to toggle the display (show when hidden and hide when shown) then use..

$('.row').click(function(){      // row is class not id
     $(this).find('span').toggle();
});