title: Show or hide table row if user clicks on it (HTML/JQuery)
body: <p>Im having a problem showing or hiding a table rows with jquery.
  I want that if user clicks on table row with <code>id="jobtitle"</code> then tr with <code>class="texter"</code> will show up or hide if already opened.</p>
  
  <p>my code right now is:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tbody&gt;
          &lt;?php foreach($works as $w){ ?&gt;
              &lt;tr id="jobtitle" onclick="onPress()"&gt;
                  &lt;td&gt;
                      &lt;?php echo $w-&gt;title; ?&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr class="texter" style="display:none;"&gt;
                  &lt;td&gt;
                      &lt;?php echo $w-&gt;text; ?&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;?php } ?&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;script&gt;
      function onPress(){
              var isHidden = $('.texter').is(":hidden");
              if (isHidden == true) {
                  $(".texter").show();
                  $("#colorized").css("background", "#06499d");
              } else {
                  $('.texter').hide();
                  $("#colorized").css("background", "#20669d");
              }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>So far all tr with <code>class="texter"</code> will expand. How to make that only one tr will toggle based on click on tr with <code>class="jobtitle"</code>.</p>