I have a title which has to be clicked on to show some information. The title not only contains text but also contains an image of an arrow that is down when the text isn't visible and has to be changed to up when the text is visible. Normally you would do this by changing the source attribute but working with Rails and the asset pipeline can pr…

info_toggle.html.haml

%h2
  = link_to "javascript:void(0);", class: "info" do
    Information
    = image_tag "arrowDown.jpg"
    = image_tag "arrowUp.jpg", style: "display:none;"
.infoContainer
  %p Info text

info_toggle.js

$(".info").click(function(){
  // simple slide animation which shows the information we want to see.
  $(".infoContainer").slideToggle("fast");
  // in the element that is clicked are two images that change display state once the element is clicked.
  $(this).find('img').toggle();
});