title: How I can toggle() show/hide next table row when click on any of rows
body: <p>How I can toggle() hide/show next table row contents when I click on any rows? 
  I am trying to create expandable table row .</p>
  
  <p>This is my Javascript code:
  here i am trying to initially hide all rows have no class="accordion"
  then by any click on any rows I need to show next row element (rowContent)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> $(function() {
              var $research = $('.treat-table');
              $research.find("tr").not('.accordion').hide();
              $research.find("tr").eq(0).show();
  
              $research.find(".accordion").click(function(){
                  $(this).next("tr").toggle();
              })
          });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table.basic-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: none;
    margin-bottom: 15px;
  }
  
  table.basic-table th {
    background-color: #66676b;
    text-align: left;
    color: #fff;
    vertical-align: top;
    font-weight: 500;
  }
  
  table.basic-table th:first-child {
    border-radius: 4px 0 0 4px;
  }
  
  table.basic-table th:last-child {
    border-radius: 0 4px 4px 0;
  }
  
  table.basic-table th,
  table.basic-table td {
    padding: 15px 28px;
  }
  
  table.basic-table tr:nth-child(odd) {
    background-color: #f6f6f6
  }
  
  table.basic-table {
    margin-bottom: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"&gt;
  &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  
  &lt;table class="basic-table treat-table"&gt;
  
    &lt;tr&gt;
      &lt;th&gt;ID&lt;/th&gt;
      &lt;th&gt;Category&lt;/th&gt;
      &lt;th&gt;Treatment Name&lt;/th&gt;
      &lt;th&gt;Price&lt;/th&gt;
      &lt;th&gt;+&lt;/th&gt;
    &lt;/tr&gt;
   
    &lt;!-- Row --&gt;
    &lt;tr class="accordion"&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;Plastic surgery&lt;/td&gt;
      &lt;td&gt;Nose job&lt;/td&gt;
      &lt;td&gt;from 2000$&lt;/td&gt;
      &lt;td&gt;+&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class="rowContent"&gt;
      &lt;td colspan="5"&gt;
      &lt;h5&gt;This is content&lt;/h5&gt;
      &lt;p&gt;This area show hided content&lt;/p&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
   &lt;!-- Row --&gt;
    &lt;tr class="accordion"&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;Plastic surgery&lt;/td&gt;
      &lt;td&gt;Nose job&lt;/td&gt;
      &lt;td&gt;from 2000$&lt;/td&gt;
      &lt;td&gt;+&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class="rowContent"&gt;
      &lt;td colspan="5"&gt;
      &lt;h5&gt;This is content&lt;/h5&gt;
      &lt;p&gt;This area show hided content&lt;/p&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  
  
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am trying next() method to select next element and then call toggle() method in my function running onclick of any rows.</p>