[ プログラミング ] jQueryで「続きを読む」「閉じる」ボタンの付いた開閉パネルの作り方

文章の最初だけ表示して、残りの文章は隠しておいて、「続きを読む」や「もっと読む」などのボタン(テキスト)をクリックしたら残りの文章を表示したい場合があります。

jQueryで実装してみました。「続きを読む」テキストをクリックしたらすぐにテキストが表示されるタイプと、スライドしながら表示されるタイプのふたつを作ってみました。

すぐにテキストが表示されるタイプのデモはこちらから。

DOMO

スライドしながら表示されるタイプのデモはこちらから。

DOMO

一応、複数の開閉パネルを設置できるようにしています。「続きを読む」テキストや「閉じる」テキストはjQueryで設定していますので、文言を変えたい場合は、jQueryのソースコードを変更してください。「続きを読む」テキストは画像にすることも可能です。その場合、直接、jQueryのソースコードを変更するか、CSSのbackgroundで変更してみてください。

すぐにテキストが表示されるタイプのソースコードです。HTML5でコーティングしています。jQueryもHTMLのheadタグ内に書いています。今回は特にCSSの指定はありません。

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery.js"></script>
<style>
</style>
<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="#">&#9650; 閉じる</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>
<title>jQueryで「続きを読む」「閉じる」ボタンの付いた開閉パネルの作り方</title>
</head>
<body>
<p>
ここに文章を書いてください。
</p>
<div class="more">
<p>
ここに続きの文章を書いてください。
</p>
<p>
ここには複数の段落や画像など挿入できます。
</p>
</div>
<p>
ここは開閉パネル外です。
</p>
<p>
ここに文章を書いてください。
</p>
<div class="more">
<p>
複数の開閉パネルを設置することが可能です。
</p>
<p>
最初に隠す文章は、&lt;div class="more"&gt;~&lt;/div&gt;で囲んでください。
</p>
</div>
<p>
ここは開閉パネル外です。
</p>
</body>
</html>

スライドしながら表示されるタイプのソースコードです。

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery.js"></script>
<style>
</style>
<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="#">&#9650; 閉じる</a></div>');
        $ele.find('.open').nextAll().hide();
        $ele.find('.open').click(function(){
            $ele.find('.open').hide();
            $ele.find('.open').nextAll().slideDown();
            return false;
        });
         $ele.find('.close').click(function(){
            $ele.find('.open').nextAll().slideUp('slow', function() {
                $ele.find('.open').show();
            });
            return false;
        });
    });
});
</script>
<title>jQueryで「続きを読む」「閉じる」ボタンの付いた開閉パネルの作り方</title>
</head>
<body>
<p>
ここに文章を書いてください。
</p>
<div class="more">
<p>
ここに続きの文章を書いてください。
</p>
<p>
ここには複数の段落や画像など挿入できます。
</p>
</div>
<p>
ここは開閉パネル外です。
</p>
<p>
ここに文章を書いてください。
</p>
<div class="more">
<p>
複数の開閉パネルを設置することが可能です。
</p>
<p>
最初に隠す文章は、&lt;div class="more"&gt;~&lt;/div&gt;で囲んでください。
</p>
</div>
<p>
ここは開閉パネル外です。
</p>
</body>
</html>