I am facing a challenge with my HTML table where I have a lot of information to add for each row. However, displaying everything at once makes the page look cluttered. Therefore, I am looking to add a "view more" button in another column for each row.
Despite trying to write JavaScript code to achieve this, it is not working as intended. My requirements are:
The row should remain invisible until I click the "view more" button (I attempted wrapping the tags inside a div, but it resulted in placing the row outside the table).
I need the code to apply to all rows so that I don't have to create separate codes for each one.
When viewing extended information for a row, I want other extended information to remain hidden.
If possible, I would like a simple animation to show the extended content.
Below is the snippet of my HTML code:
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Action</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td><a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;" class="btn bN-btn-base bN-btn-small">View More</a></td>
</tr>
<tr>
<td colspan="3">
<div id="example" class="more">
<p>John Doe is a man</p>
<p style="text-align:right;"><a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide this content.</a></p>
</div>
</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td><a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;" class="btn bN-btn-base bN-btn-small">View More</a></td>
</tr>
<tr>
<td colspan="3">
<div id="example" class="more">
<p>Jane Doe is a woman</p>
<p style="text-align:right;"><a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide this content.</a></p>
</div>
</td>
</tr>
</table>
This is how the CSS looks like:
<style type="text/css">
.more {
display: none;
}
a.showLink, a.hideLink {
text-decoration: none;
color: #36f;
padding-left: 8px;
background: transparent url(down.gif) no-repeat left;
}
a.hideLink {
background: transparent url(up.gif) no-repeat left;
}
a.showLink:hover, a.hideLink:hover {
border-bottom: 1px dotted #36f;
}
</style>
Finally, here is the JavaScript portion:
<script language="javascript" type="text/javascript">
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
</script>