jQueryで表示文字数制限を触ってみたら、閉じれるものを作りたくなったので作ってみた。
コード
<ul>
<li class="textOverFlow02">開いて閉じる。あいうえおかきくけこさしすせそ</li>
<li class="textOverFlow02">開いて閉じる。あいうえおかきくけこさしすせそ</li>
<li class="textOverFlow02">開いて閉じる。あいうえおかきくけこさしすせそ</li>
<li class="textOverFlow02">開いて閉じる。あいうえおかきくけこさしすせそ</li>
<li class="textOverFlow02">開いて閉じる。あいうえおかきくけこさしすせそ</li>
<li class="textOverFlow02">開いて閉じる。あいうえおかきくけこさしすせそ</li>
<li class="textOverFlow02">開いて閉じる。あいうえおかきくけこさしすせそ</li>
<li class="textOverFlow02">開いて閉じる。あいうえおかきくけこさしすせそ</li>
<li class="textOverFlow02">開いて閉じる。あいうえおかきくけこさしすせそ</li>
<li class="textOverFlow02">開いて閉じる。あいうえおかきくけこさしすせそ</li>
</ul>
.moreLead {
color: blue;
cursor: pointer;
}
.textOverFlow02 .moreTxt {
display: none;
}
$(function(){
function textOverFlow02(){ //表示文字数制限+α
var count = 10,
target = $('.textOverFlow02');
$('.textOverFlow02').each(function(){
$(this).html($(this).text().replace($(this).text().slice(count),'<span class="moreTxt">'+$(this).text().slice(count)+'</span><span>…</span><span class="moreLead">[全文表示]</span>'));
$('.moreLead',this).toggle(function(){
$(this).text('[閉じる]').parent().children('.moreTxt').show().next().hide();
},function(){
$(this).text('[全文表示]').parent().children('.moreTxt').hide().next().show();
});
});
}
textOverFlow02();
});