title: How to expand table rows with jquery?
body: <p>Currently I have the table that is presented as the image shows with the hidden even rows. What I am looking for is that all the rows are hidden and the name of the month appears.</p>
  <p>In the example of the image it would only have to appear November and when displaying it would have that the information for that month will appear. I am using jexpand plugin from jquery</p>
  <p>I leave the code so that you can see how I currently have it. Any ideas?</p>
  <p>SCRIPT</p>
  <pre class="lang-php prettyprint-override"><code>$(document).ready(function(){
                  $(&quot;#report tr:odd&quot;).addClass(&quot;odd&quot;);
                  $(&quot;#report tr:not(.odd)&quot;).hide();
                  $(&quot;#report tr:first-child&quot;).show();
                  $(&quot;#report tr.odd&quot;).click(function(){
                  $(this).next(&quot;tr&quot;).toggle();
                  $(this).find(&quot;.arrow&quot;).toggleClass(&quot;up&quot;);
              });
          });
  
  </code></pre>
  <p>CSS</p>
  <pre class="lang-css prettyprint-override"><code>body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.8em;}
  #report { border-collapse:collapse;}
  #report h4 { margin:0px; padding:0px;}
  #report img { float:right;}
  #report ul { margin:10px 0 10px 40px; padding:0px;}
  #report th { background:#7CB8E2 url(../img/header_bkg.png) repeat-x scroll center left; color:#fff; padding:7px 15px; text-align:center;}
  #report td { background:#C7DDEE none repeat-x scroll center left; color:#000; padding:7px 15px; }
  #report tr.odd td { background:#fff url(../img/row_bkg.png) repeat-x scroll center left; cursor:pointer; }
  #report div.arrow { background:transparent url(../img/arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
  #report div.up { background-position:0px 0px;}
  
  </code></pre>
  <p>HTML</p>
  <pre class="lang-html prettyprint-override"><code> &lt;table id=&quot;report&quot; class=&quot;table table-striped table-bordered table-sm text-center&quot; style=&quot;width:35%; margin:auto;&quot;&gt;
              
                  &lt;thead class= &quot;text-center table-info&quot;&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Date&lt;/th&gt;
                          &lt;th&gt;Calls&lt;/th&gt;
                          &lt;th&gt;Sales&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;?php for($i = 0; $i &lt; count($calls); ++$i) { ?&gt;
                          &lt;tr class=&quot;text-center&quot;&gt;
                              &lt;td id=&quot;id&quot;&gt;&lt;?= $calls[$i]['date'] ;?&gt;&lt;/td&gt;
                              &lt;td id=&quot;database&quot;&gt;&lt;?= $calls[$i]['calls'] ;?&gt;&lt;/td&gt;
                              &lt;td id=&quot;total&quot;&gt;&lt;?= $calls[$i]['sales'] ;?&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;div class=&quot;arrow&quot;&gt;&lt;/div&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;?php } ?&gt;
                  &lt;?php endif; ?&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
  
  </code></pre>
  <p><a href="https://i.stack.imgur.com/XWZYc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XWZYc.png" alt="table" /></a></p>