ColdFusionクエリshow hide div

Question

私は、onclickが展開して残りの値を表示するボタンを表示する必要があるシナリオを持っています。値はクエリから来ています。たとえば、値が8以上の場合は、ボタンを表示する必要があります。私はこれがかなりシンプルに聞こえることを知っている、私は以下のような何かを試してみましたが、それを行うより良い方法（よりダイナミック）ですか？

<cfif getqry.recordCount neq 0> 
     <div id="topics" class="posts margin-bottom-40"> 
      <div class="headline"><h2>News </h2> 
     <cfoutput> 
     <cfloop query="getqry" startrow="1" endrow="8"> 
      <div class="btn-group hover_drop_down"> <a href="/abc.cfm?newsid=#nid#" class="btn" type="button"> #News_item# </a> </div> 
     </cfloop> 

      <cfif getqry.recordCount gt 8> 
      <div id="collapse-news" class="collapse-inline collapse"> 
        <cfloop query="getqry" startrow="9" endrow="#getqry.recordCount#"> 
          <div class="btn-group hover_drop_down"> <a href="abc.cfm?newsid=#nid#" class="btn btn-news dropdown-toggle" type="button"> #news_item# </a> </div> 
       </cfloop> 
      </div> 

     <button class="btn btn-kw-ml MoreLess" data-toggle="collapse" data-target="##collapse-news">See More</button> 
     </cfif> 
     </div> 
     </cfoutput> 
    </cfif> 

<script type="text/javascript"> 
     $('.MoreLess').click(function(){ 
       var $this = $(this); 
       $this.toggleClass('MoreLess'); 
       if($this.hasClass('MoreLess')){ 
        $this.text('See More');     
       } else { 
        $this.text('See Less'); 
       } 
     }); 
</script> 

Answer 1

私はこのアプローチを使用します。 ColdFusionの

で

<cfsavecontent variable = dynamicContent> 
coldfusion and html code goes here 
</cfsavecontent> 

<div id="stuffToToggle"> 
something here, maybe 
</div> 

javascriptの

<cfoutput> 
var #toScript(dynamicContent, "stuffFromColdFusion")# 
</cfoutput> 
function toggleStuff() { 
if (something) 
document.getElementById("stuffToToggle").innerHtml = stuffFromColdFusion; 
else 
document.getElementById("stuffToToggle").innerHtml = somethingElse; 
} 

では構文が完璧ではないかもしれません。私はあなたに一般的なアイデアを示しています。

Answer 2

ワンラインソリューションはありません。ただし、コードをビットに簡略化するには、query.currentRow変数を使用して、コンテナdivタグの生成を制御します。また、cfloopとcfoutputの両方を必要としません。

<cfset hideAtRow = 9> 
... 
<cfoutput query="getQry"> 

     <!--- start container for "show more" ---> 
     <cfif getQry.currentRow eq hideAtRow > 
     <div id="collapse-news" class="collapse-inline collapse"> 
     </cfif> 

     <!--- assign classes based on current row number ---> 
     <cfset btnClass = currentRow gte hideAtRow ? "btn btn-news dropdown-toggle" : "btn"> 
     <div class="btn-group hover_drop_down"> 
     <a href="/abc.cfm?newsid=#nid#" class="#btnClass#" type="button"> #News_item# </a> 
     </div> 

     <!--- on last row, close "show more" container if needed ---> 
     <cfif getQry.currentRow eq getQry.recordCount and getQry.currentRow gte hideAtRow > 
     </div> 
     <button id="testButton" class="btn btn-kw-ml MoreLess" data-toggle="collapse" data-target="##collapse-news">See More</button> 
     </cfif> 

</cfoutput> 
...