jQuery only works when viewing page from backend

Hi, I'm using the regular, not the developer platform and the Hudson template.

I have implemented jQuery by it injecting into my header.

I am trying to get two paragraphs of text to be shown on click of H3.

<script type="text/javascript"     
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript"     
 src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<script>
$(document).ready(function(){
$(".read-more").click(function(){
$(".bio-more").slideToggle();
});
});
</script>

<div class="read-more">
<h3>Read More</h3>
<div class="bio-more">
<p>some text</p>
<p>some text</p>
</div>
</div>

.bio-more{
display:none;
}

It works when I view the page from the back end from a url that is my-accountsquarespace.com/whitney-oldenburg (I don't seem to be able to access this page when logged out unfortunately)

But when I view this page: http://gitanarosa.com/artist/#/whitney-oldenburg/ either logged in or out which is basically the same, but without some strange stretched out thumbnail at the top that Squarespace adds, it doesn't work.

Is it something wrong with my code? I tried using an anchor element with "#" instead of H3, but that didn't make a difference? Does it have anything to do with the # in the url? Is the page created dynamically? Do I need to change it in the template. I have also read that the script can be entered in a page and then linked to, but that seemed unnecessarily complicated. Might that make a difference?

Or is this some Squarespace specific problem?

Thanks.