title: Expand/Collapse Table row
body: <p>I want a table which expand or collapse. My requirement is when I click on table row then hidden row show or when I click on other table row then previous open row hide or show relative hide row. I found a jquery jxpand perfect for me it show hidden row but when I click on other row previous hidden data remain open not hide I want previous hide or show new related row hidden data. My code snippet is as follow</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
              $("#report tr:odd").addClass("odd");
              $("#report tr:not(.odd)").hide();
              $("#report tr:first-child").show();
              
              $("#report tr.odd").click(function(){
                  $(this).next("tr").toggle();
                  $(this).find(".arrow").toggleClass("up");
              });
              //$("#report").jExpand();
          });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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(header_bkg.png) repeat-x scroll center left; color:#fff; padding:7px 15px; text-align:left;}
          #report td { background:#C7DDEE none repeat-x scroll center left; color:#000; padding:7px 15px; }
          #report tr.odd td { background:#52edc7; cursor:pointer; }
          #report div.arrow { background:transparent url(arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
          #report div.up { background-position:0px 0px;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;table id="report"&gt;
          &lt;tr&gt;
              &lt;th&gt;Country&lt;/th&gt;
              &lt;th&gt;Population&lt;/th&gt;
              &lt;th&gt;Area&lt;/th&gt;
              &lt;th&gt;Official languages&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;United States of America&lt;/td&gt;
              &lt;td&gt;306,939,000&lt;/td&gt;
              &lt;td&gt;9,826,630 km2&lt;/td&gt;
              &lt;td&gt;English&lt;/td&gt;
              &lt;td&gt;show/hide&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="5"&gt;
                  &lt;img src="125px-Flag_of_the_United_States.svg.png" alt="Flag of USA" /&gt;
                  &lt;h4&gt;Additional information&lt;/h4&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="http://en.wikipedia.org/wiki/Usa"&gt;USA on Wikipedia&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://nationalatlas.gov/"&gt;National Atlas of the United States&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://www.nationalcenter.org/HistoricalDocuments.html"&gt;Historical Documents&lt;/a&gt;&lt;/li&gt;
                   &lt;/ul&gt;   
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;United Kingdom &lt;/td&gt;
              &lt;td&gt;61,612,300&lt;/td&gt;
              &lt;td&gt;244,820 km2&lt;/td&gt;
              &lt;td&gt;English&lt;/td&gt;
              &lt;td&gt;show/hide&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="5"&gt;
                  &lt;img src="125px-Flag_of_the_United_Kingdom.svg.png" alt="Flag of UK" /&gt;
                  &lt;h4&gt;Additional information&lt;/h4&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="http://en.wikipedia.org/wiki/United_kingdom"&gt;UK on Wikipedia&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://www.visitbritain.com/"&gt;Official tourist guide to Britain&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://www.statistics.gov.uk/StatBase/Product.asp?vlnk=5703"&gt;Official 
                          Yearbook of the United Kingdom&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;India&lt;/td&gt;
              &lt;td&gt;1,147,995,904&lt;/td&gt;
              &lt;td&gt;3,287,240‡ km2&lt;/td&gt;
              &lt;td&gt;Hindi, English&lt;/td&gt;
              &lt;td&gt;show/hide&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="5"&gt;
                  &lt;img src="125px-Flag_of_India.svg.png" alt="Flag of India" /&gt;
                  &lt;h4&gt;Additional information&lt;/h4&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="http://en.wikipedia.org/wiki/India"&gt;India on Wikipedia&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://india.gov.in/"&gt;Government of India&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://wikitravel.org/en/India"&gt;India travel guide&lt;/a&gt;&lt;/li&gt;
                   &lt;/ul&gt;   
              
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Canada&lt;/td&gt;
              &lt;td&gt;33,718,000&lt;/td&gt;
              &lt;td&gt;9,984,670 km2&lt;/td&gt;
              &lt;td&gt;English, French&lt;/td&gt;
              &lt;td&gt;show/hide&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="5"&gt;
                  &lt;img src="125px-Flag_of_Canada.svg.png" alt="Flag of Canada" /&gt;
                  &lt;h4&gt;Additional information&lt;/h4&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="http://en.wikipedia.org/wiki/Canada"&gt;Canada on Wikipedia&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://atlas.gc.ca/site/index.html" &gt;Official 
                          Government of Canada online Atlas of Canada&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://wikitravel.org/en/Canada"&gt;Canada travel guide&lt;/a&gt;&lt;/li&gt;
                   &lt;/ul&gt;   
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Germany&lt;/td&gt;
              &lt;td&gt;82,060,000&lt;/td&gt;
              &lt;td&gt;357,021 km2&lt;/td&gt;
              &lt;td&gt;German&lt;/td&gt;
              &lt;td&gt;show/hide&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="5"&gt;
                  &lt;img src="125px-Flag_of_Germany.svg.png" alt="Flag of Germany" /&gt;
                  &lt;h4&gt;Additional information&lt;/h4&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="http://en.wikipedia.org/wiki/Germany"&gt;Germany on Wikipedia&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://www.deutschland.de/home.php?lang=2"&gt;Deutschland.de Official Germany portal&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://www.cometogermany.com/"&gt;Germany Travel Info&lt;/a&gt;&lt;/li&gt;
                   &lt;/ul&gt;   
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
      &lt;em&gt;* Information taken from Wikipedia&lt;/em&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>like if view UK hidden data then open Canada hidden data UK opened data will again hide and Canada data will open </p>