CODEWITHSUNDEEP
javascriptjqueryhtmlcssexpand
John 'Mark' Smith
John 'Mark' Smith

Reputation: 2614

jQuery - change CSS of span inside a clicked div

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.

Upvotes: 0

Views: 3252

Answers (4)

Premshankar Tiwari
Premshankar Tiwari

Reputation: 3106

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();
});

Upvotes: 1

Pat Dobson
Pat Dobson

Reputation: 3299

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')

Upvotes: 3

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57095

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

Upvotes: 2

Venkata Krishna
Venkata Krishna

Reputation: 15112

$(".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

Upvotes: 3

Related Questions