_answer.html.erb

<div class="answers-container" style="margin-bottom:30px;">
  <div id="a<%= answer.id %>" style="border: 1px solid #337ab7; border-radius:5px;">
    <div class="navbar navbar-default">
      <div class="navbar-text pull-left">
      <% if answer.author %>
        <% if answer.author.user && answer.author.user.photo_file_name %>
        <img style="width:32px;margin-right:6px;" class="img-circle" src="<%= answer.author.user.photo_path(:thumb) %>" /> 
        <% else %>
        <div style="vertical-align:middle;display:inline-block;height:32px;width:32px;margin-right:6px;background:#ccc;" class="img-circle"></div> 
        <% end %>
        <a href="/profile/<%= answer.author.name %>"><%= answer.author.name %></a>
      <% end %>
        <span class="hidden-xs">answered</span>
        <a style="color:#aaa;" href="#a<%= answer.id %>"><%= time_ago_in_words(answer.created_at) %> ago</a>
      </div>
      <div class="navbar-text pull-right">
        <% if current_user && answer.uid == current_user.uid %>
        <a class="btn btn-default btn-sm" href="javascript:void(0)" onClick="$('#c<%= answer.id %>edit').toggle();$('#c<%= answer.id %>show').toggle();setInit(<%= answer.id %>);"><i class="fa fa-pencil"></i></a>
        <% end %>

        <% if current_user && (current_user.role == "admin" || current_user.role == "moderator" || answer.uid == current_user.uid || answer.node.uid == current_user.uid) %>
          <a data-remote="true" data-confirm="Are you sure? <% if current_user && answer.uid != current_user.uid %>Please exercise caution in deleting/moderating others' answer; this cannot be undone.<% end %>" href="/answers/delete/<%= answer.id %>" class="btn btn-default btn-sm" id="a<%= answer.id %>delete-btn"><i class='icon fa fa-trash'></i></a>
        <% end %>
      </div>
    </div>
    <div id="c<%= answer.id %>show" style="padding:0px 20px">
      <p><%= raw sanitize(auto_link(RDiscount.new(answer.body).to_html)) %></p>
    </div>
    <% if current_user %>
      <%=  render :partial => "comments/edit", :locals => { title: "Edit answer", comment: answer, placeholder: "Help users by posting an answer to this question" } %>
    <% end %>
    <hr />
    <div style="padding: 0px 20px 10px 20px;">
    <% if current_user && current_user.uid == answer.node.uid || answer.accepted %>
      <a <% if current_user && current_user.uid == answer.node.uid %> href="/answers/accept/<%= answer.id %>" <% end %> data-remote="true" id="answer-<%= answer.id %>-accept" class="answer-accept btn btn-sm <% if answer.accepted %>btn-success<% else %>btn-default<% end%>"><% if answer.accepted %><p class="alert alert-success">Your answer was accepted! If it would be helpful, consider expanding on this answer by <a href="/post?template=activity,tags=response:<question-nid>">posting a step-by-step activity</a></p><% else %>Accept this answer<% end %></a>
    <% end %>
       <a href=<% if current_user %>"/answer_like/likes/<%= answer.id %>"<% else %>"#"<% end %>data-remote ="true" tooltip-title="Helpful? Like it" class="btn btn-default btn-sm btn-like" id="answer-like-button-<%= answer.id %>" <% unless current_user %> popover-content="You must be logged in to Like the answer" <% end %> ><span id="answer-like-star-<%= answer.id %>" class="fa fa-star<% if current_user && !answer.liked_by(current_user.uid) %>-o<% end %>"></span> <span id="answer-like-count-<%= answer.id %>"><%= answer.likers.length %></span> Likes</a>
      <a href="#a<%= answer.id %>" class="btn btn-default btn-sm "><i class="fa fa-share-alt"></i></a> &nbsp;
      <a id="answer-<%= answer.id %>-comment-button"  style="color: #006dcc;"><span id="answer-<%= answer.id %>-comment-count"><%= answer.comments.length %></span> Comments <i class="fa fa-caret-down"></i></a>
    </div>

    <div id="answer-<%= answer.id %>-comment" style="margin: 10px; padding:10px; border-radius: 5px; background-color: #eee; display: none;">
      <div id="answer-<%= answer.id %>-comment-section">
      <% if current_user %>
      <div class="inline hidden-xs" style="vertical-align: top;">
        <% if current_user.photo_file_name %>
          <img class="img-circle" src="<%= current_user.photo_path(:thumb) %>" /> 
        <% else %>
          <div class="img-circle"></div> 
        <% end %>
      </div>
      <div class="inline" id="question-comment-form">
        <form id="answer-<%= answer.id %>-comment-form" class="form-horizontal" action="/comment/answer_create/<%= answer.id%>" data-remote="true">
          <%= render partial: "questions/form" %>  
        </form>
      </div>
      <% else %>
        <p><a href="/login">Log in</a> to comment</p> 
      <% end %>
      </div>
      <% answer.comments.each do |comment| %>
        <%= render partial: "questions/comment", locals: { comment: comment, answer_id: answer.id } %>
      <% end %>
    </div>
  </div>
</div>

<script type="text/javascript">
  $(function(){
    $("#answer-like-button-<%= answer.id %>").popover({
      content: $("#answer-like-button-<%= answer.id %>").attr("popover-content")
    })

    $("#answer-like-button-<%= answer.id %>").tooltip({
      title: $("#answer-like-button-<%= answer.id %>").attr("tooltip-title")
    })

    var stripped_url = document.location.toString().split("#");
    var check_matched = false;
    if(stripped_url.length > 1){
      var anchor_value = stripped_url[1];
      if(anchor_value.match('answer-<%= answer.id %>-comment'))
        check_matched = true;
    }

    if (check_matched){
        $("#answer-<%= answer.id %>-comment").toggle();
        $('.answer-<%= answer.id %>-comments').show();
    }
    else{
      $('.answer-<%= answer.id %>-comments').slice(0,3).show();
      if (<%= answer.comments.length %> > 3){
        $('#answer-<%= answer.id %>-comment').append('<p id="answer-<%= answer.id %>-expand" style="color: #006dcc;">View ' + comment_select(<%= answer.id %>).length + ' more comments</p>');
        $("#answer-<%= answer.id %>-expand").on('click',function(){
          expand_comments(<%= answer.id %>);
        });
      }
    }
    
  })

  $("#answer-<%= answer.id %>-comment-button").click( function(){
    $("#answer-<%= answer.id %>-comment").toggle();
  });

  $('#answer-<%= answer.id %>-comment-form').bind('ajax:error', function(e, response){
    $('#answer-<%= answer.id %>-comment-section .help-block').remove()
    $('#answer-<%= answer.id %>-comment-section .inline').last().append('<span class="help-block" style="color: red;">Error: there was a problem.</span>')
  })
  
</script>