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

Question

当我点击链接时它会工作，它会折叠其他隐藏的名称，但是我试图在点击链接后更改图像。无法让这个工作。这就是我现在所拥有的：

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

感谢您的期待！

Answer 1

请检查演示并试用。删除more和less。

http://jsfiddle.net/tvd2dfe0/2/