EC-CUBE2.12：新着情報をアコーディオン効果で表示する。1件目のみ全文表示。

リンクを設定すると、上図にあるように、「★詳しくはこちら」が表示されます。

サンプルはこちら

（1）■data/Smarty/templates/default/frontparts/bloc/news.tpl

<script type="text/javascript">
$(document).ready(function() {
$(".news_title").hover(function(){
$(this).css("cursor","pointer");
$(this).css("color","#F90");
},function(){
$(this).css("cursor","default");
$(this).css("color","#369");
});
$(".comment").css("display","none");
$(".rank_1").css("display","inherit");
$(".news_title").click(function(){
$('.news_title').next().slideUp();
$(this).next().slideToggle("fast");
}).next();
});
</script>

<div class="block_outer">
<div id="news_area">
<h2><img src="<!--{$TPL_URLPATH}-->img/title/tit_bloc_news.jpg" alt="新着情報" /><span class="rss"><a href="<!--{$smarty.const.ROOT_URLPATH}-->rss/<!--{$smarty.const.DIR_INDEX_PATH}-->" target="_blank"><img src="<!--{$TPL_URLPATH}-->img/button/btn_rss.jpg" alt="RSS" /></a></span></h2>
<div class="block_body">
<div class="news_contents">
<!--{section name=data loop=$arrNews}-->
<!--{assign var="date_array" value="-"|explode:$arrNews[data].news_date_disp}-->
<div class="newslist">
<div class="date"><!--{$date_array[0]}-->年<!--{$date_array[1]}-->月<!--{$date_array[2]}-->日</div>
<div class="news_title"><span><!--{$arrNews[data].news_title|h|nl2br}--></span></div>
<!--{assign var=db_rank value="`$arrNews[data].rank`"}-->
<div class="comment rank_<!--{math equation="$newsCount - $db_rank + 1"}-->">
<!--{$arrNews[data].news_comment|h|nl2br}-->
<!--{if $arrNews[data].news_url}-->
<div class="link">
<a href="<!--{$arrNews[data].news_url}-->"<!--{if $arrNews[data].link_method eq "2"}--> target="_blank"<!--{/if}-->>★詳しくはこちら</a>
</div>
<!--{/if}-->
</div>
</div>
<div class="clear"></div>
<!--{/section}-->
</div>
</div>
</div>
</div>

（2）■html/user_data/packages/default/css/bloc.css

/* ===============================================
▼新着情報
=============================================== */
#news_area .block_body {
padding: 10px;
min-height:50px;
}
#news_area .date {
float:left;
min-width:100px;
margin-right:10px;
}
#news_area .news_title {
float:left;
padding-left:12px;
background:url(../img/icon/open.gif) no-repeat left center;
color:#369;
font-weight:bold;
margin-bottom:5px;
}
#news_area .comment {
clear:both;
padding-left:20px;
margin-bottom:15px;
background:url(../img/background/bg_newsbody.png) repeat-y #f7f7f7;
}
#news_area .comment .link {
font-weight:bold;
}

（3）画像を追加
■html/user_data/packages/default/img/background/bg_newsbody.png

■html/user_data/packages/default/img/icon/open.gif