Smarty のループ内で、javascript

質問

Smarty　でブログを作成しており、
section 内に、
javascript　でスライドをつけました。

しかし、１個めのスライドだけしか、動きません。

方法ご存知か方がおられましたら、お助け願います。
どうかよろしくお願い致します。

<div class="content">
{section name=tloop loop=$topics max=$settings.maxtopics}

{if $topics[tloop].title != ''}

{$topics[tloop].bodyf}

<!--********************************************-->
<div id="slide">
<button id="btn3">
詳細
</button>
<div style="display:none; height:100%; width:100%; background-color:#ffffff">
<!--詳細情報-->
{$topics[tloop].bodyf2}
</div>
</div>

<script type="text/javascript">
{literal}
jQuery(function($){

var target = $("div", "#slide");
$("#btn3").click(function(){
if (target.is(":hidden")) {
target.slideDown();
}
else {
target.slideUp();
}
})
});
{/literal}
</script>

<hr>
<!--********************************************-->

{/if}

{/section}
</div>

</body>
</html>

回答No.1

mookun2007 · ベストアンサー

ざっくり見ただけですが、

> <button id="btn3">

と

> $("#btn3").click(function(){

の「btn3」をループする度に違うIDにすればいいと思いますよ。

試して無いですが、こんな感じかな。
<button id="btn{$smarty.section.tloop.index}">
$("button[id^='btn']").click(function(){

お礼

ありがとうございます。
出来ました。（＾＾）