Change 2 images to one text onClick

Question

When a user clicks on either thumbs_up or thumbs_down, those 2 icons should be replaced with a text like 'You voted'. How do I do that?

   <div class="thumbsup">
       <%= link_to image_tag('othericons/thumbsup_off.PNG', height: '20', width: '20', like_post_comment_path(comment.post_id, comment), method: :put, :remote => true %>
   </div>

    <div class="thumbsdown">
        <%= link_to image_tag('othericons/thumbsdown_off.PNG', height: '20', width: '20', dislike_post_comment_path(comment.post_id, comment), method: :put, :remote => true %>
    </div>

Answer 1

Add this in an asset file

$('.thumbsdown a, .thumbsup a').on('click', function() {
  $('.thumbsdown').before('You voted')
  $('.thumbsdown, .thumbsup').remove()
})

What this does is add the text You voted before the thumbsdown div and then remove the div afterwards. There's no single right way to do this so it's up to you how.