PHP & JavaScript Room :: 設置サンプル

実行結果

Simple Toggle with CSS & jQuery | 設置サンプル

アボガドダイニング Platinum Lounge@麻布十番

おすすめMENU

アボカド シーザーサラダ@アボガドダイニング Platinum Lounge

アボガド シーザーサラダ

よくわからないけどちゃんとアボガド入りです!クリーミーなシーザードレッシングとアボガドの相性がとってもよかったです。

アボカド刺@アボガドダイニング Platinum Lounge

アボガド刺

アボガドにお醤油がかかってるせいか、わさびをちょっとのせて食べると、マグロ入ってないのに、マグロの味がしましたw

ベーコンとアボカドのピザ(トマトソース)@アボガドダイニング Platinum Lounge

ベーコンとアボカドのピザ(トマトソース)

めちゃくちゃおいしかったアボカドのピザ!ピザ生地はクリスピータイプでさくさく!

高庵TOKYO@新宿三丁目

おすすめMENU

白レバー串みそ焼き@高庵

白レバー串みそ焼き

白レバーは、ほぼレア状態で口にいれるとふわっととろけます♪味噌ダレととっても合ってます。5本くらいはぺろりといけそうwフォアグラステーキより美味しいかも!?

白子の雲丹のせ炙り@高庵

白子の雲丹のせ炙り

白子にウニがたっぷりのってます★箸でつかむのがむずかしいくらい、お豆腐みたいにとろとろ!口に入れるとじゅわーっとうまみが広がります。あー幸せ!

自家製さつま揚げ二種@高庵

自家製さつま揚げ二種

黒いのはしいたけじゃありませんwさつま揚げです。箸で切らずに、そのまま揚げたてをぱくぱくいただくのが流儀のようです。味がしっかりついているので、このままいけます!

小鳥屋@中目黒

おすすめMENU

レバ刺@鳥小屋

レバ刺

びっくりするぐらい美味しいレバ刺!鮮度抜群!味付きでたれには付けて食べないタイプ。ぜんぜんレバーの臭みがなくて、ちょっとレバーって嫌いって人でもつるつるいけちゃいそう!いままで食べた中で一番おいしいレバ刺でした♪何皿もいけそうなくらい!!

明太子玉子焼き@鳥小屋

明太子玉子焼き

玉子焼きの中に明太子がたっぷり♪上に乗ったマヨネーズとの愛称抜群でどことなーく懐かしいお袋の味!玉子焼きは半熟でとろっとろっ♪ほっぺたがおちそうでした!

モツ鍋@鳥小屋

モツ鍋

キャベツたっぷり。ぷりぷりで大きなモツがたっぷり入ったモツ鍋。スープは醤油ベースのみ。1種類ってのがこだわりを感じるわぁ♪鳥小屋のモツ鍋食べるとほんと他店のモツ鍋がものたりなくなるわw

設置サンプルのソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta http-equiv="Content-Language" content="ja" />
      <meta http-equiv="Content-Script-Type" content="text/javascript" />
      <meta http-equiv="Content-Style-Type" content="text/css" />
      <meta http-equiv="imagetoolbar" content="no" />
      <title>Simple Toggle with CSS &amp; jQuery | 設置サンプル</title>
      <link rel="stylesheet" type="text/css" href="/content/lib/global.css" media="all" />
      <!-- JS -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
       <script type="text/javascript">
          $(function(){
            $(".toggle_container").hide();
            $("h2.trigger").toggle(function(){
               $(this).addClass("active"); 
               }, function () {
               $(this).removeClass("active");
            });
            
            $("h2.trigger").click(function(){
               $(this).next(".toggle_container").slideToggle("slow,");
            });
         });
      </script>
         <!-- CSS -->
      <style type="text/css">
         #wrap {
            width:500px;
         }
         h2.trigger {
            float:left;
            width:450px; height:46px;
            margin:0 0 5px 0; padding:0 0 0 50px;
            background:url(/content/img/ajax/simple_toggle/h2_trigger_a.gif) no-repeat;
            line-height:46px;
            font-size:1.5em;
            font-weight:normal;
         }
         h2.trigger a {
            display:block;
            color:#fff;
            text-decoration:none;
         }
         h2.trigger a:hover {
            color:#ccc;
         }
         h2.active {background-position:left bottom;}
         .toggle_container {
            width:500px;
            margin:0 0 5px 0; padding:0;
            border-top:1px solid #d6d6d6;
            background:#f0f0f0 url(/content/img/ajax/simple_toggle/toggle_block_stretch.gif) repeat-y left top;
            overflow:hidden;
            clear:both;
         }
         .toggle_container .block {
            padding:10px 20px 0 20px;
            background:url(/content/img/ajax/simple_toggle/toggle_block_btm.gif) no-repeat left bottom;
         }
         .toggle_container .block p {
            margin:5px 0;padding:5px 0;
         }
         .toggle_container h3 {
            margin:0 0 15px 0; padding:0 0 10px 0;
            border-bottom:1px dashed #ccc;
            font-size:1.2em;
         }
         .toggle_container img {
            float:left;
            margin:0 15px 15px 0; padding:5px;
            border:1px solid #ccc;
            background:#ddd;
         }
      </style>
   <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
   <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP &amp; JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
      <div id="wrap">
         <h1><a href='http://www.sohtanaka.com/web-design/easy-toggle-jquery-tutorial/'>Simple Toggle with CSS &amp; jQuery</a> | 設置サンプル</h1>
<!-- CODE -->
         <div class="cf">
            <h2 class="trigger"><a href="#">アボガドダイニング Platinum Lounge@麻布十番</a></h2>
            <div class="toggle_container">
               <div class="block">
                  <h3>おすすめMENU</h3>
                  <div class="cf">
                     <a href="http://www.flickr.com/photos/22559849@N06/3274514408/" title="アボカド シーザーサラダ@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3514/3274514408_1800118ded_t.jpg" width="100" height="75" alt="アボカド シーザーサラダ@アボガドダイニング Platinum Lounge" /></a>
                     <h4>アボガド シーザーサラダ</h4>
                     <p>よくわからないけどちゃんとアボガド入りです!クリーミーなシーザードレッシングとアボガドの相性がとってもよかったです。</p>
                  </div>
                  <div class="cf">
                     <a href="http://www.flickr.com/photos/22559849@N06/3273696567/" title="アボカド刺@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381_t.jpg" width="100" height="75" alt="アボカド刺@アボガドダイニング Platinum Lounge" /></a>
                     <h4>アボガド刺</h4>
                     <p>アボガドにお醤油がかかってるせいか、わさびをちょっとのせて食べると、マグロ入ってないのに、マグロの味がしましたw</p>
                  </div>
                  <div class="cf">
                     <a href="http://www.flickr.com/photos/22559849@N06/3273696469/" title="ベーコンとアボカドのピザ(トマトソース)@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3427/3273696469_aa2aaf5e89_t.jpg" width="100" height="75" alt="ベーコンとアボカドのピザ(トマトソース)@アボガドダイニング Platinum Lounge" /></a>
                     <h4>ベーコンとアボカドのピザ(トマトソース)</h4>
                     <p>めちゃくちゃおいしかったアボカドのピザ!ピザ生地はクリスピータイプでさくさく!</p>
                  </div>
               </div>
            </div><!-- .toggle_container -->

            <h2 class="trigger"><a href="#">高庵TOKYO@新宿三丁目</a></h2>
            <div class="toggle_container">
               <div class="block">
                  <h3>おすすめMENU</h3>
                  <div class="cf">
                     <a href="http://www.flickr.com/photos/22559849@N06/3105515562/" title="白レバー串みそ焼き@高庵 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3203/3105515562_b203eee85a_t.jpg" width="100" height="75" alt="白レバー串みそ焼き@高庵" /></a>
                     <h4>白レバー串みそ焼き</h4>
                     <p>白レバーは、ほぼレア状態で口にいれるとふわっととろけます♪味噌ダレととっても合ってます。5本くらいはぺろりといけそうwフォアグラステーキより美味しいかも!?</p>
                  </div>
                  <div class="cf">
                     <a href="http://www.flickr.com/photos/22559849@N06/3104684027/" title="白子の雲丹のせ炙り@高庵 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3015/3104684027_a215663229_t.jpg" width="100" height="75" alt="白子の雲丹のせ炙り@高庵" /></a>
                     <h4>白子の雲丹のせ炙り</h4>
                     <p>白子にウニがたっぷりのってます★箸でつかむのがむずかしいくらい、お豆腐みたいにとろとろ!口に入れるとじゅわーっとうまみが広がります。あー幸せ!</p>
                  </div>
                  <div class="cf">
                     <a href="http://www.flickr.com/photos/22559849@N06/3104683957/" title="自家製さつま揚げ二種@高庵 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3033/3104683957_a8b91f3235_t.jpg" width="100" height="75" alt="自家製さつま揚げ二種@高庵" /></a>
                     <h4>自家製さつま揚げ二種</h4>
                     <p>黒いのはしいたけじゃありませんwさつま揚げです。箸で切らずに、そのまま揚げたてをぱくぱくいただくのが流儀のようです。味がしっかりついているので、このままいけます!</p>
                  </div>
               </div>
            </div><!-- .toggle_container -->

            <h2 class="trigger"><a href="#">小鳥屋@中目黒</a></h2>
            <div class="toggle_container">
               <div class="block">
                  <h3>おすすめMENU</h3>
                  <div class="cf">
                     <a href="http://www.flickr.com/photos/22559849@N06/3031535599/" title="レバ刺@鳥小屋 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3064/3031535599_2f8b454232_t.jpg" width="100" height="75" alt="レバ刺@鳥小屋" /></a>
                     <h4>レバ刺</h4>
                     <p>びっくりするぐらい美味しいレバ刺!鮮度抜群!味付きでたれには付けて食べないタイプ。ぜんぜんレバーの臭みがなくて、ちょっとレバーって嫌いって人でもつるつるいけちゃいそう!いままで食べた中で一番おいしいレバ刺でした♪何皿もいけそうなくらい!!</p>
                  </div>
                  <div class="cf">
                     <a href="http://www.flickr.com/photos/22559849@N06/3031535573/" title="明太子玉子焼き@鳥小屋 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3217/3031535573_6e541be249_t.jpg" width="100" height="75" alt="明太子玉子焼き@鳥小屋" /></a>
                     <h4>明太子玉子焼き</h4>
                     <p>玉子焼きの中に明太子がたっぷり♪上に乗ったマヨネーズとの愛称抜群でどことなーく懐かしいお袋の味!玉子焼きは半熟でとろっとろっ♪ほっぺたがおちそうでした!</p>
                  </div>
                  <div class="cf">
                     <a href="http://www.flickr.com/photos/22559849@N06/3032375082/" title="モツ鍋@鳥小屋 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3239/3032375082_fd66d11941_t.jpg" width="100" height="75" alt="モツ鍋@鳥小屋" /></a>
                     <h4>モツ鍋</h4>
                     <p>キャベツたっぷり。ぷりぷりで大きなモツがたっぷり入ったモツ鍋。スープは醤油ベースのみ。1種類ってのがこだわりを感じるわぁ♪鳥小屋のモツ鍋食べるとほんと他店のモツ鍋がものたりなくなるわw</p>
                  </div>
               </div>
            </div><!-- .toggle_container -->
         </div>
<!-- / CODE -->
      </div>
   </body>
</html>