$(document).ready(function () {

    // Collapse content
    $('.whatsOn li .boxLink').after('<a class="boxLink moreInfo showHide" href="#">More Info</a>');

    $('.infoWrap p').hide();

    $('.infoWrap').each(function (){
        $(this).children("p:first").show();
   });

    //Hide (Collapse) the toggle containers on load
  $(".imageWrap").each(function(){
   $(".images li:not(:first)",$(this)).hide();
  });

    //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
  $(".showHide").click(function () {
      $(this).toggleClass("moreInfo").toggleClass("closeLink");
      $(".imageWrap .images li:not(:first)", $(this).closest('li')).slideToggle("slow");
        if($(this).hasClass("closeLink")){
            $(this).parent().children("p").show();
        }
        else {
            $(this).parent().children("p").hide();
            $(this).parent().children("p:first").show();    
        }     

      $(this).blur();
      return false; //Prevent the browser jump to the link anchor
  });


});