I have successfully implemented a functionality whereby clicking a link collapses other hidden names. However, I am now facing a challenge in trying to change an image once the link is clicked. Here is the code snippet that I currently have:
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
//the data stored in the data-emails
var emailData = ($(this).attr("data-emails"));
//toggle the link clicked on
$(".email" + emailData).toggle();
$(".more").toggle();
//select the parent and find the span so you can
//toggle the "email-plus" class
$(this).parent().find("span").toggleClass("email-plus");
$(this).parent().find("span").toggleClass("less");
});
});<table cellpadding="0" cellspacing="0" border="1">
<tr style="vertical-align: bottom">
<td>
Names:
<a href="#" class="toggler" data-emails="1">
<span class="email-plus" style="text-transform: none;font-weight: bold;outline: 0;">All Names</span>
<span class="more"><img src='more.png'></span> <span class="less"><img src='less.png'></span>
</a>
</td>
</tr>
<tr style="vertical-align: top;display:none;" class="email1">
<td colspan="6" cellpadding="0" cellspacing="0" style="vertical-align: top;">
<p class="email1" style="display:none;font-weight: bold; margin-left: 44px; margin-top: 1px; margin-bottom: 3px;">Name 1</p>
<p class="email1" style="display:none;font-weight: bold; margin-left: 44px; margin-top: 3px; margin-bottom: 3px;">Name 2</p>
<p class="email1" style="display:none;font-weight: bold; margin-left: 44px; margin-top: 1px; margin-bottom: 2px;">Name 3</p>
</td>
</tr>
</table>Appreciate your help in resolving this issue!