title: jquery toggle <td> on click of a button
body: <p>I have a table that has a few items inside, and a button for each that will display more information on the specific item on the menu. </p>
  
  <p>my HTML table is below </p>
  
  <pre><code>&lt;table id="menu_breads"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th colspan="2"&gt;BREADS&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;th&gt;ITEM&lt;/th&gt;
              &lt;th&gt;PRICE&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;Portugese Rolls
                  &lt;button class="myButton"&gt;&amp;#x2C5&lt;/button&gt;
              &lt;/td&gt;
              &lt;td&gt;R1.49&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="2" class="more"&gt;A hand made selection of Portugese rolls&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Hotdog Buns
                  &lt;button class="myButton"&gt;&amp;#x2C5&lt;/button&gt;
              &lt;/td&gt;
              &lt;td&gt;R0.99&lt;/td&gt;
              &lt;tr&gt;
                  &lt;td colspan="2" class="more"&gt;A hand made selection of Hotdog buns&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;French Loaf
                  &lt;button class="myButton"&gt;&amp;#x2C5&lt;/button&gt;
              &lt;/td&gt;
              &lt;td&gt;R3.49&lt;/td&gt;
              &lt;tr&gt;
                  &lt;td colspan="2" class="more"&gt;A hand made selection of French loaves&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Sead Roll
                  &lt;button class="myButton"&gt;&amp;#x2C5&lt;/button&gt;
              &lt;/td&gt;
              &lt;td&gt;R2.49&lt;/td&gt;
              &lt;tr&gt;
                  &lt;td colspan="2" class="more"&gt;A hand made selection of Seed Rolls&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;tfoot&gt;
          &lt;tr&gt;
              &lt;td colspan="2"&gt;
                   &lt;h6&gt;Prices may change without prior warning&lt;/h6&gt;
  
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tfoot&gt;
  &lt;/table&gt;
  &lt;!-- TABLE FOR CONFECTIONARIES --&gt;
  &lt;table id="menu_confect"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th colspan="2"&gt;CONFECTIONARIES&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;th&gt;ITEM (per slice)&lt;/th&gt;
              &lt;th&gt;PRICE&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;Cream Slice
                  &lt;button class="myButton"&gt;&amp;#x2C5&lt;/button&gt;
              &lt;/td&gt;
              &lt;td&gt;R12.49&lt;/td&gt;
              &lt;tr&gt;
                  &lt;td colspan="2" class="more"&gt;A hand made selection of Cream slices&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Chocolate Cake
                  &lt;button class="myButton"&gt;&amp;#x2C5&lt;/button&gt;
              &lt;/td&gt;
              &lt;td&gt;R15.99&lt;/td&gt;
              &lt;tr&gt;
                  &lt;td colspan="2" class="more"&gt;A hand made selection of Chocolate cakes&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Coconut Eclaire
                  &lt;button class="myButton"&gt;&amp;#x2C5&lt;/button&gt;
              &lt;/td&gt;
              &lt;td&gt;R2.49&lt;/td&gt;
              &lt;tr&gt;
                  &lt;td colspan="2" class="more"&gt;A hand made selection of Coconut Eclairs&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Chocolate Eclaire
                  &lt;button class="myButton"&gt;&amp;#x2C5&lt;/button&gt;
              &lt;/td&gt;
              &lt;td&gt;R4.49&lt;/td&gt;
              &lt;tr&gt;
                  &lt;td colspan="2" class="more"&gt;A hand made selection of chocolate Eclairs&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;tfoot&gt;
          &lt;tr&gt;
              &lt;td colspan="2"&gt;
                   &lt;h6&gt;Prices may change without prior warning&lt;/h6&gt;
  
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tfoot&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>My CSS is here </p>
  
  <pre><code>.myButton {
      background: #183C4C;
      border-radius: 31%;
      border:2px solid #4e6096;
      display:inline-block;
      cursor:pointer;
      color:#ffffff;
      font-family:Arial;
      font-size:11px;
      text-decoration:none;
      width: 15%;
      float: right;
  }
  
  .more {
      display: none;
      }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/aozjzahv/" rel="nofollow">Demo</a></p>
  
  <p>and the jquery is what I am having a bit of a problem understanding. Would I need to ID every td that I want to display or can I do it with classes and an on click toggle event?</p>
  
  <p>I have managed to get it to display on click, the problem is that all the hidden rows display and not just the individual one.</p>
  
  <pre><code>$(document).ready(function(){
  
  $('.myButton').click(function(){
      $(this).closest('tr').next().find('.more').toggle();
  
      if ($(this).closest('tr').is(":visible")) {
                  $(this).html("&amp;#x2C4")
          }
          else { 
              $(this).html("&amp;#x2C5")
          }
  });
  </code></pre>
  
  <p>});</p>