jquery - Kirby で JavaScript と CSS が機能しないコンテンツの切り替え

Question

ここで見つけたトグル コードを使用しようとしています: http://jsfiddle.net/wGbh5/。それは非常に簡単で、私がやりたいことを正確に行っているように見えました。

そのため、 style.cssファイルに次のコードがありました。

.clickme {
background-color: #eee;
border-radius: 4px;
color: #666;
display: block;
margin-bottom: 5px;
padding: 5px 10px;
text-decoration: none;}

.clickme:hover {
    text-decoration: underline;
}

次に、次のコードを含むtoggle.jsファイルを作成しました。

// Hide all the elements in the DOM that have a class of "box"
$('.box').hide();
// Make sure all the elements with a class of "clickme" are visible and bound
// with a click event to toggle the "box" state
$('.clickme').each(function() {
    $(this).show(0).on('click', function(e) {
        // This is only needed if your using an anchor to target the "box" elements
        e.preventDefault();

        // Find the next "box" element in the DOM
        $(this).next('.box').slideToggle('fast');
    });
});

そして、ヘッダーで、次の行を使用して、htmlで両方のファイルを呼び出しました

<link rel="stylesheet" href="http://localhost:8888/kirby/assets/styles/styles.css" />
<script src="http://localhost:8888/kirby/assets/js/toggle.js"></script>

リンクでわかるように、私は MAMP を使用してローカルで作業し、CMS Kirbyを試しています。

HTML ファイルでは、コードは次のようになります。

<a href="#" class="clickme">Click Me</a>
<div class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
    when an unknown printer took a galley of type and scrambled it to make a type
</div>

問題は、ブラウザに html ファイルをロードしても機能しないことです (正常に機能していればここにいるでしょうか?)。「clickme」と「box」の両方のコンテンツが表示され、クリックしても何も追加されません。

誰でも私の問題を解決できますか?

事前にどうもありがとう