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>

  広告

 - お仕事