【jQuery】「続きを読む」「閉じる」ボタンの付いた開閉パネルの作り方
2016/12/16
お仕事で「続きを読む」と「閉じる」ボタン（リンク）を表示したかったので
jQueryを実装しました。
【参考サイト】
[ プログラミング ] jQueryで「続きを読む」「閉じる」ボタンの付いた開閉パネルの作り方
http://coolwebwindow.com/jquery-lab/archives/473
デザインで閉じるリンクが画像だったので、imgタグに変更しました。（赤字部分）
CSSでdisplay:noneにするタイプのアコーディオンもありますが、
今回はjQueryのみで実装するタイプとなります。
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('.more').each(function(){
var $ele = $(this);
$ele.prepend('<div class="open"><a href="#">▼ 続きを読む</a></div>');
$ele.append('<div class="close"><a href="#"><img src="img/close.png"></a></div>');
$ele.find('.open').nextAll().hide();
$ele.find('.open').click(function(){
$ele.find('.open').hide();
$ele.find('.open').nextAll().show();
return false;
});
$ele.find('.close').click(function(){
$ele.find('.open').show();
$ele.find('.open').nextAll().hide();
return false;
});
});
});
</script>
<body>
<p>
ここに文章を書いてください。
</p>
<div class="more">
<p>
ここに続きの文章を書いてください。
</p>
<p>
ここには複数の段落や画像など挿入できます。
</p>
</div>
</body>