Добавить расширение и свернуть изображение по ссылке

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/