jQuery read data-attributes, hide/show correct div

Question

Im trying to make a table with data attributes on the rows and the ability to show divs with the same data attribute on click. I could add more data-attributes if it makes the jquery functions easier/smarter.

Need some help to make it all play nice :)

Thanks in advance!

EDIT: jsFiddle link: http://jsfiddle.net/MXpnQ/

$(".productRow").click(function () {
 $(this).parent().hide("slow"); //hides the fundListContainer
 --function to show the correct fundInfoContainer--?
});

$(".backToCorrectListButton").click(function () {
 --function to hide the fundInfoContainer and show the correct fundListContainer--?
});

<div class="fundListContainer">
<table>
 <tr class="productRow" data-fundId="1">
  <td></td>
  <td></td>
 </tr>
 <tr class="productRow" data-fundId="2">
  <td></td>
  <td></td>
 </tr>
</table>
</div>

<div class="fundInfoContainer" data-fundId="1" style="display: none">
 <div class="backToCorrectListButton">back to list</div>
</div>

<div class="fundInfoContainer" data-fundId="2" style="display: none">
 <div class="backToCorrectListButton">back to list</div>
</div>

miguel.camba · Accepted Answer · 2011-10-16 18:18:54Z

3

Sure you can!

$(".productRow").click(function () {
   $(this).parent().hide("slow"); //hides the fundListContainer
   $("[data-fundId="+$(this).data('fundId')+"]").hide();
});

If you want to select a element by any of his attributes (data-attr or not) use the notation

$("[attr_name=value]")

See http://api.jquery.com/attribute-equals-selector/

EDIT: Look if this is what you want

http://jsfiddle.net/MXpnQ/3/

edited Oct 16, 2011 at 18:18

answered Oct 16, 2011 at 16:30

miguel.camba

1,8271 gold badge15 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Emin Over a year ago

I need to show the fundInfoContainer so I changed your code from "hide" to "show". But it doesn't work.

Emin Over a year ago

It's as it doesn't collect the data trom the data-attribute in the TR.

miguel.camba Over a year ago

I'll check it. Hold on a second.

Collectives™ on Stack Overflow

jQuery read data-attributes, hide/show correct div

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related