将展开和折叠图像添加到链接

单击链接时它可以工作，它会折叠其他隐藏的名称，但是一旦单击链接，我就会尝试更改图像。不能让这个工作。这是我现在拥有的：

     $(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>

感谢您的观看！