「もっと読む」をつくる

[どうやって？]

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

[実行結果]

[ソースコード]

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();
		}); 

インデックスにもどる