1
jQuery で記事を折り畳もう!ということで、
やってみました

!...実は今、見てはいけないものを見てしまいました
でも、見ていないフリをして先に進みたいと思います

...

ということで、
まずは、折り畳みに使う jQuery を追加します(赤いとこ)
<script type="text/javascript"> 
     $(function(){
          $("a[href^='http://']").attr("target","_blank");
          $(".open").click(function(){
               $("#slideBox").slideToggle("slow");
          });
     });
</script>
*ひとつ前の記事の jQuery 記述部分に追加しています

次に、CSS の部分を追加します(赤いとこ)
/* divの色をグレーに変えてみます */
.divColorGray{background:#eeeeee; padding:10px}
/* divの折りたたみ */
.open{
     background: #ffffff;
     color: #3399dd;
     cursor: pointer;
     width:100px;
     padding: 5px
     }
#slideBox{
     display:none;
     }

仕上げに、HTMLで<p>と<div>に
折り畳みに使う命令を記述します(赤いとこ)
<div> の部分は前回つくった CSSを使い、
薄いグレーで表示するようにもしています(青いとこ)
<p class="open">[ 記事の続き ]</p>
<div id="slideBox" class="divColorGray">
中身がでてきました<br>
でてきたでしょ?<br>
わかりやすく<div>の中はグレーで表示してます<br>
色が必要なければ class="divColorGray"を消せばいいですよ<br>
</div>
<p>の中身をクリックすると、<div>が開くようになります
class="open"と、id="slideBox"が連動するんでしょうね

さてさて、うまく動いてくれるでしょうか?
↓↓この下の[記事の続き]ってとこをクリックします↓↓↓↓

[ 記事の続き ]

中身がでてきました
でてきたでしょ?
わかりやすく<div>の中はグレーで表示してます
色が必要なければ class="divColorGray"を消せばいいですよ
↑↑この上に出てきますよ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑


で、「見てはいけないもの」が何か?っていうと
...
...
...ブログを書くところに「記事の続き」ってのを書く場所がありました
...当たり前のハナシ?...なの?

この記事のトラックバックURL
トラックバック

Calendar
S M T W T F S
   1234
567891011
12131415161718
19202122232425
262728293031 
<< August 2018 >>
My Apps
有料アプリ

無料アプリ

Selected entries
Categories
AdSense
Sponsored Links
Archives
Recent comment
Links
Profile
Search this site.
Others
Mobile
qrcode
powered
無料ブログ作成サービス JUGEM