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
$(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();
});#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;}<script src=".3.2/jquery.min.js"></script>
<table id="report">
<tr>
<th>Country</th>
<th>Population</th>
<th>Area</th>
<th>Official languages</th>
<th></th>
</tr>
<tr>
<td>United States of America</td>
<td>306,939,000</td>
<td>9,826,630 km2</td>
<td>English</td>
<td>show/hide</td>
</tr>
<tr>
<td colspan="5">
<img src="125px-Flag_of_the_United_States.svg.png" alt="Flag of USA" />
<h4>Additional information</h4>
<ul>
<li><a href="">USA on Wikipedia</a></li>
<li><a href="/">National Atlas of the United States</a></li>
<li><a href=".html">Historical Documents</a></li>
</ul>
</td>
</tr>
<tr>
<td>United Kingdom </td>
<td>61,612,300</td>
<td>244,820 km2</td>
<td>English</td>
<td>show/hide</td>
</tr>
<tr>
<td colspan="5">
<img src="125px-Flag_of_the_United_Kingdom.svg.png" alt="Flag of UK" />
<h4>Additional information</h4>
<ul>
<li><a href="">UK on Wikipedia</a></li>
<li><a href="/">Official tourist guide to Britain</a></li>
<li><a href=".asp?vlnk=5703">Official
Yearbook of the United Kingdom</a></li>
</ul>
</td>
</tr>
<tr>
<td>India</td>
<td>1,147,995,904</td>
<td>3,287,240‡ km2</td>
<td>Hindi, English</td>
<td>show/hide</td>
</tr>
<tr>
<td colspan="5">
<img src="125px-Flag_of_India.svg.png" alt="Flag of India" />
<h4>Additional information</h4>
<ul>
<li><a href="">India on Wikipedia</a></li>
<li><a href="/">Government of India</a></li>
<li><a href="">India travel guide</a></li>
</ul>
</td>
</tr>
<tr>
<td>Canada</td>
<td>33,718,000</td>
<td>9,984,670 km2</td>
<td>English, French</td>
<td>show/hide</td>
</tr>
<tr>
<td colspan="5">
<img src="125px-Flag_of_Canada.svg.png" alt="Flag of Canada" />
<h4>Additional information</h4>
<ul>
<li><a href="">Canada on Wikipedia</a></li>
<li><a href=".html" >Official
Government of Canada online Atlas of Canada</a></li>
<li><a href="">Canada travel guide</a></li>
</ul>
</td>
</tr>
<tr>
<td>Germany</td>
<td>82,060,000</td>
<td>357,021 km2</td>
<td>German</td>
<td>show/hide</td>
</tr>
<tr>
<td colspan="5">
<img src="125px-Flag_of_Germany.svg.png" alt="Flag of Germany" />
<h4>Additional information</h4>
<ul>
<li><a href="">Germany on Wikipedia</a></li>
<li><a href=".php?lang=2">Deutschland.de Official Germany portal</a></li>
<li><a href="/">Germany Travel Info</a></li>
</ul>
</td>
</tr>
</table>
<em>* Information taken from Wikipedia</em>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
$(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();
});#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;}<script src="https://ajax.googleapis./ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<table id="report">
<tr>
<th>Country</th>
<th>Population</th>
<th>Area</th>
<th>Official languages</th>
<th></th>
</tr>
<tr>
<td>United States of America</td>
<td>306,939,000</td>
<td>9,826,630 km2</td>
<td>English</td>
<td>show/hide</td>
</tr>
<tr>
<td colspan="5">
<img src="125px-Flag_of_the_United_States.svg.png" alt="Flag of USA" />
<h4>Additional information</h4>
<ul>
<li><a href="http://en.wikipedia/wiki/Usa">USA on Wikipedia</a></li>
<li><a href="http://nationalatlas.gov/">National Atlas of the United States</a></li>
<li><a href="http://www.nationalcenter/HistoricalDocuments.html">Historical Documents</a></li>
</ul>
</td>
</tr>
<tr>
<td>United Kingdom </td>
<td>61,612,300</td>
<td>244,820 km2</td>
<td>English</td>
<td>show/hide</td>
</tr>
<tr>
<td colspan="5">
<img src="125px-Flag_of_the_United_Kingdom.svg.png" alt="Flag of UK" />
<h4>Additional information</h4>
<ul>
<li><a href="http://en.wikipedia/wiki/United_kingdom">UK on Wikipedia</a></li>
<li><a href="http://www.visitbritain./">Official tourist guide to Britain</a></li>
<li><a href="http://www.statistics.gov.uk/StatBase/Product.asp?vlnk=5703">Official
Yearbook of the United Kingdom</a></li>
</ul>
</td>
</tr>
<tr>
<td>India</td>
<td>1,147,995,904</td>
<td>3,287,240‡ km2</td>
<td>Hindi, English</td>
<td>show/hide</td>
</tr>
<tr>
<td colspan="5">
<img src="125px-Flag_of_India.svg.png" alt="Flag of India" />
<h4>Additional information</h4>
<ul>
<li><a href="http://en.wikipedia/wiki/India">India on Wikipedia</a></li>
<li><a href="http://india.gov.in/">Government of India</a></li>
<li><a href="http://wikitravel/en/India">India travel guide</a></li>
</ul>
</td>
</tr>
<tr>
<td>Canada</td>
<td>33,718,000</td>
<td>9,984,670 km2</td>
<td>English, French</td>
<td>show/hide</td>
</tr>
<tr>
<td colspan="5">
<img src="125px-Flag_of_Canada.svg.png" alt="Flag of Canada" />
<h4>Additional information</h4>
<ul>
<li><a href="http://en.wikipedia/wiki/Canada">Canada on Wikipedia</a></li>
<li><a href="http://atlas.gc.ca/site/index.html" >Official
Government of Canada online Atlas of Canada</a></li>
<li><a href="http://wikitravel/en/Canada">Canada travel guide</a></li>
</ul>
</td>
</tr>
<tr>
<td>Germany</td>
<td>82,060,000</td>
<td>357,021 km2</td>
<td>German</td>
<td>show/hide</td>
</tr>
<tr>
<td colspan="5">
<img src="125px-Flag_of_Germany.svg.png" alt="Flag of Germany" />
<h4>Additional information</h4>
<ul>
<li><a href="http://en.wikipedia/wiki/Germany">Germany on Wikipedia</a></li>
<li><a href="http://www.deutschland.de/home.php?lang=2">Deutschland.de Official Germany portal</a></li>
<li><a href="http://www.etogermany./">Germany Travel Info</a></li>
</ul>
</td>
</tr>
</table>
<em>* Information taken from Wikipedia</em>like if view UK hidden data then open Canada hidden data UK opened data will again hide and Canada data will open
Share Improve this question asked Oct 31, 2015 at 11:26 DamiDami 1672 gold badges3 silver badges14 bronze badges 01 Answer
Reset to default 4Just add $("#report tr:not(.odd)").hide(); in the click function.
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();
$("#report tr.odd").click(function () {
$("#report tr:not(.odd)").hide();
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
JsFiddle
Edit Based on ments - we can hide the current selected element something like the following:
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();
$("#report tr.odd").click(function () {
var trToToggle = $(this).next("tr");
$("#report tr:not(.odd)").not(trToToggle).hide();
$(trToToggle).toggle();
$(this).find(".arrow").toggleClass("up");
});
Edited jsFiddle here