0
    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
    1234567
    891011121314
    15161718192021
    22232425262728
    293031    
    << October 2017 >>
    My Apps
    有料アプリ

    無料アプリ

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