まず、comments_template()
戻り値を完全な文字列にします。
次に、このようにコードを構造化してみてください。ボタンをクリックすると.hide()
、コメントが表示されます。.ready()
.show()
.comment-button
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button class="comment-button">Show Comments</button>
<p class="comments"><?php echo comments_template(); ?></p>
<script>
$("document").ready(function() {
$(".comments").hide();
$(".comment-button").click(function () {
$(".comments").show("slow");
});
});
</script>
</body>
$()
jQueryでも直接要素を使用しないでください。クラスまたは ID を使用します。
また、微妙なアニメーションで要素を折りたたむことができる優れたフレームワークを使用したい場合は、 Bootstrap for Twitterを試してから、次のようにします。
<div class="comment-1 collapse">
<?php echo comments_template(); ?>
</div>
<button data-target=".comment-1" data-toggle="collapse">Show Comment</button>
ブートストラップ ライブラリに既に含まれているため、Javascript は必要ありません。