「もっと読む」をつくる

[どうやって?]

1. メソッドclick(); を使う。
2. メソッドslideDown(); を使う。
3. メソッドhide(); を使う。

[実行結果]

下のピンクのボタンをクリックするとスライドしてもっと読むことができる。
そのためにはこの直下にid="more-text"を設置して
CSSでdisplay:none;としておく...
ボタンにはid="read-more"を設置。
クリックしたら、$(′#read-more′).click(function(){
  $(′#more-text′).slideDown();
  $(′#read-more′).hide();
});
<このグレーの部分が初めdisplay:none;で隠れている部分>
もっと読む
たたむ

[ソースコード]

HTML
	
        <div class="intro">
          下のピンクのボタンをクリックするとスライドしてもっと読むことができる。
		  そのためにはこの直下にid="more-text"を設置して
		  CSSでdisplay:none;としておく...
		  ボタンにはid="read-more"を設置。
          <div id="more-text">
            クリックしたら、$(′#read-more′).click(function(){
			  $(′#more-text′).slideDown();
			  $(′#read-more′).hide();
			});
          </div><!-- /#more-text -->
        </div><!-- /.intro -->
        <div id="read-more">もっと読む</div>

jQuery
		
	$(document).ready(function(){
		$('#read-more').click(function(){
			$('#more-text').slideDown('slow');
			$('#read-more').hide();
		}); 

インデックスにもどる