hiroeleganceのエレガンスとは呼べない日常

WEB屋hiroelegance(ヒロエレガンス)のブログhiroeleganceのエレガンスとは呼べない日常略して「エレ日」です。YouTubeで毎週火曜0時にラジオを配信しています。

【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="#">&#9660; 続きを読む</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>

  広告

 - お仕事