[もっとみる...] / [See more...] をjQueryで実装する（開閉できるタイプ）
欲しいもの
これはサンプルテキスト、これはサンプルテキストでサンプルなの。
これはサンプルテキスト、これはサンプルテキス …more
↓moreをクリックすると↓
これはサンプルテキスト、これはサンプルテキストでサンプルなの。
これはサンプルテキスト、これはサンプルテキストでサンプルなの。
これはサンプルテキスト、これはサンプルテキストでサンプルなの。
閉じる
こんなやつ。
CSSだと文字を切って非表示にはできるけど、開閉はできない。
jQueryも文字を切るだけのものはよくあるけど、開けたり閉めたりする参考はあんまりなかった。
で考えてみたら、切るのは確かに簡単だ。
でも切ってしまったら、moreで全文を見る方法がない。
[googlead]
解決法
テキストを2つに分けます。
こんな感じ。
これはサンプルテキスト、これはサンプルテキストでサンプルなの。
これはサンプルテキスト、これはサンプルテキストでサンプルなの。
これはサンプルテキスト、これはサンプルテキストでサンプルなの。
青字と赤字で文字を分割して、デフォルトでは赤字を隠しておく。
moreがクリックされたら赤字を表示する。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<div class="more">
これはサンプルテキスト、これはサンプルテキストでサンプルなの。
これはサンプルテキスト、これはサンプルテキストでサンプルなの。
これはサンプルテキスト、これはサンプルテキストでサンプルなの。
</div>
<style>
.morecontent span {
display: none;
}
</style>
<script>
$(document).ready(function() {
var showChar = 100;
var ellipsestext = "...";
var moretext = "more";
var lesstext = "less";
$('.more').each(function() {
var content = $(this).html();
if(content.length > showChar) {
var c = content.substr(0, showChar);
var h = content.substr(showChar, content.length - showChar);
var html = c + '<span class="moreellipses">' + ellipsestext+ ' </span><span class="morecontent"><span>' + h + '</span> <a href="" class="morelink">' + moretext + '</a></span>';
$(this).html(html);
}
});
$(".morelink").click(function(){
if($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
</script>
テキストだけを開閉するにはこれでOK。
実装
自分がやりたかったのは色んな要素の開閉を一度したり、
英語と日本語で文字数を変えたりで、
もうちょっと複雑になったけど基本は同じ。
↓
こちらに実装してみました。
https://acomoo.com/publics/view_flat/3
参考サイト
http://black-flag.net/jquery/20121010-4227.html
Dynamically Shortened Text With “Show More” Link Using JQuery