title: jQuery read data-attributes, hide/show correct div
body: <p>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.</p>
  
  <p>Need some help to make it all play nice :)</p>
  
  <p>Thanks in advance!</p>
  
  <p>EDIT: jsFiddle link: <a href="http://jsfiddle.net/MXpnQ/" rel="nofollow">http://jsfiddle.net/MXpnQ/</a></p>
  
  <pre><code>$(".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--?
  });
  
  &lt;div class="fundListContainer"&gt;
  &lt;table&gt;
   &lt;tr class="productRow" data-fundId="1"&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr class="productRow" data-fundId="2"&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
   &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;div class="fundInfoContainer" data-fundId="1" style="display: none"&gt;
   &lt;div class="backToCorrectListButton"&gt;back to list&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="fundInfoContainer" data-fundId="2" style="display: none"&gt;
   &lt;div class="backToCorrectListButton"&gt;back to list&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>