CODEWITHSUNDEEP
javascriptjquery
JianYA
JianYA

Reputation: 3024

JQuery animate only one cell

I am currently learning JQuery and was wondering how you can only affect one cell from a table? This is my fiddle https://jsfiddle.net/amosangyongjian/mmqasf5t/4/

This is the jquery code

$(document).ready(function(){
    $("td").hover(function(){
    $(this).siblings(".expand").slideDown("slow");
  },function(){
    $(this).siblings(".expand").slideUp("slow");
  });
});

I've tried several other methods but none seem to work.

Please help. Thank you

Upvotes: 1

Views: 38

Answers (3)

smoksnes
smoksnes

Reputation: 10851

td doesn't have any siblings with .expand. However, p does.

So you have two alternatives, either set the event listener to td p, which also would affect the area that you can hover. So what you really want is probably to change:

$(this).siblings(".expand")

to

$(this).children(".expand")


$("td").hover(function(){
  $(this).children(".expand").slideDown("slow");
}, function(){
  $(this).children(".expand").slideUp("slow");
});
td {
  padding:10px;
}

.expand {
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="tableclass">
<tr>
  <td>
    <p class="expand">Hello1Expanded</p>
    <p>Hello1</p>
  </td>
  <td>
    <p class="expand">Hello1Expanded</p>
    <p>Hello2</p>
  </td>
</tr>
<tr>
  <td>
    <p class="expand">Hello1Expanded</p>
    <p>Hello3</p>
  </td>
  <td>
    <p class="expand">Hello1Expanded</p>
    <p>Hello4</p>
  </td>
</tr>
</table>

Upvotes: 1

Sophie
Sophie

Reputation: 1

    this is correct way when you choose via $("td")

        $(document).ready(function(){
            $("td").hover(function(){
            $(this).find(".expand").slideDown('slow');
          },function(){
            $(this).find(".expand").slideUp("slow");
          });
        });

or

 $(document).ready(function(){
            $("td").hover(function(){
            $(this).children(".expand").slideDown('slow');
          },function(){
            $(this).children(".expand").slideUp("slow");
          });
        });

    your code also work when you change your code $("td p")

     $("td p") -siblings will  .expand
     $("td") -siblings will another td datas

    because siblings will it get previous element.

Upvotes: 0

Tobias S
Tobias S

Reputation: 1275

Try this:

$(document).ready(function(){
	$("td").hover(function(){
  		$(this).find(".expand").slideDown("slow");
  	},function(){
  		$(this).find(".expand").slideUp("slow");
  	});
});
td {
  padding:10px;
}

.expand {
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="tableclass">
<tr>
  <td>
    <p class="expand">Hello1Expanded</p>
    <p>Hello1</p>
  </td>
  <td>
    <p class="expand">Hello1Expanded</p>
    <p>Hello2</p>
  </td>
</tr>
<tr>
  <td>
    <p class="expand">Hello1Expanded</p>
    <p>Hello3</p>
  </td>
  <td>
    <p class="expand">Hello1Expanded</p>
    <p>Hello4</p>
  </td>
</tr>
</table>

Upvotes: 2

Related Questions