title: How do I access rails helpers and embedded ruby inside assets javascript files in ruby on rails?
body: <p>I have a show and hide div that shows and hides comments when clicked. By default before it's clicked it shows a message count plus some down arrows e.g. </p>
  
  <p><strong>"55 Comments [down arrows]"</strong> </p>
  
  <p>and when clicked it changes to:</p>
  
  <p><strong>"Hide comments [up arrows]"</strong></p>
  
  <p><strong>I use this code for displaying the amount of comments by default and the arrow (users/new):</strong></p>
  
  <pre><code>    &lt;span class="commentsCount"&gt;&lt;%= pluralize(m.comments.count, 'comment') %&gt;&lt;/span&gt;
      &lt;span class="commentArrows"&gt;&lt;%= image_tag 'view_all_comments.png' %&gt; &lt;/span&gt;
  </code></pre>
  
  <p><strong>I use JQuery to help achieve the changes (users/load_comments.js.erb):</strong></p>
  
  <pre><code>$('.postHolder').off().on('ajax:success', '.view_all_comments', function(){
  
      var postContent = $(this).parents('.post_content'),
          commentContainer = postContent.find('.comment_container'),
          getComments = "&lt;%= j render 'users/partials/show_all_comments' %&gt;";
          commentContainer.slice(0, -2).remove();
  
  // The next 2 lines replace the comment count with "Hide comments" and up arrows"
  
            postContent.find('.commentsCount').html("Hide comments");
            postContent.find(".commentArrows img").prop("src", "/assets/up_arrows.png");
  
               postContent.find('.comment_container:first').before(getComments);
  });
  </code></pre>
  
  <p>Now the important part is when <strong>Hide comments</strong> is clicked again. I need it to revert back to showing comments count. I can revert the arrows back to original arrows but the text I don't see a way of reverting back to the comments account because I can't access rails helpers and my instance variables etc inside my assets/javascripts/users.js file.</p>
  
  <p><strong>Here is the code (assets/javascripts/users.js:</strong></p>
  
  <pre><code>    // for showing and hiding comments
  
          $('.expandComments').click(function() {
  
          var showAllCommentsSubmit = $(this).find('.showAllCommentsSubmit'),
              postContent = $(this).parents('.post_content'),
              commentContainer = postContent.find('.comment_container');
  
  
              if ($(this).hasClass('visible')) {
                  postContent.find(".comment_container").slice(0, -1).hide();
                  postContent.find(".commentArrows img").prop("src", "/assets/view_all_comments.png");
  
  //Here is where I need the code to replace the "Hide comments" text.
  
              }  else {
  
  
                  if (showAllCommentsSubmit.is(':disabled')) {
                      postContent.find(".comment_container").show();
                      postContent.find(".commentArrows img").prop("src", "/assets/hide_comments.png");
  
                  } else {
                      showAllCommentsSubmit.trigger('submit');
                      showAllCommentsSubmit.prop({disabled: true});
                      postContent.find(".commentArrows img").prop("src", "/assets/comments-loader.gif");
                  }
              }
  
              $(this).toggleClass('visible');
  
          });
  </code></pre>
  
  <p>Since I don't think it's possible to use embedded ruby / rails helpers in the assets javascript files how would I be able to achieve what I'm trying to achieve. </p>
  
  <p>Is there some way to display some html on top of other html then remove it when it's not needed any more and have the html underneath revealed again?</p>
  
  <p>I'm sure there are some other solutions I can come up with such as bring some css into play.. having a div hide and show but I haven't figured how I'd do that exactly. Wondering if there is a quick solution.</p>