プラグインなしで特定文字数以上を省略し「もっと読む」で続きを展開したい

プラグインは使用せず、<p class="hoge"></p>を30文字目以上を省略し「もっと読む」トリガー(aタグではなくspan)で続きを展開したいです。

jquery1.7.2の環境で動作することが前提です。

ご教授のほどよろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

単純にJavaScriptで書いた場合はこうなります。
実際はもっと汎用で使えるように書くべきですが簡単に書けばこうなります。
Pタグ内に他のタグが含まれる場合などは考慮していません。
私はjQueryを使うまでも無いと考えます。

html
1<!doctype html>
2<head>
3<meta charset="utf-8">
4</head>
5<body>
6<p class="hoge">吾輩（わがはい）は猫である。名前はまだ無い。どこで生れたかとんと見当（けんとう）がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪（どうあく）な種族であったそうだ。</p>
7<script>
8(function(document){
9	var hoge = document.getElementsByClassName('hoge').item(0);
10	var text= hoge.innerHTML;
11	var text30 = text.substr(0,30);
12	var textRemain = text.substr(30);
13	if (textRemain != '') {
14		hoge.innerHTML = text30
15			+ '<span style="display:none;" id="hogehoge">'
16			+ textRemain
17			+ '</span>'
18			+ '<span style="color:red" onclick="this.style.display=\'none\';document.getElementById(\'hogehoge\').style.display=\'inline\';">'
19			+ 'もっと読む'
20			+ '</span>';
21	}
22})(document);
23</script>
24</body>
25</html>