fork(1) download
copy 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <!--
  6. metaタグでcharsetをUTF-8に設定しています。
  7. (モチロン他のキャラクターセットに変更しても良いですが)必ずcharsetに設定されているキャラクターセットでセーブして下さい。
  8. -->
  9.   <title></title>
  10.   <style>
  11.     .Accordion_Container {}
  12.  
  13.     .Accordion_Label_Opener {
  14.       font-weight: bold;
  15.       color: #fef;
  16.       background: #0bb;
  17.     }
  18.  
  19.     .Accordion_Content {
  20.       display: none;
  21.       border: solid thin #000;
  22.       border-radius: 0.5rem;
  23.       padding: 0.25rem;
  24.       margin: 0.25rem;
  25.     }
  26.  
  27.     .Accordion_Radio:checked+.Accordion_Content {
  28.       display: block;
  29.     }
  30.  
  31.     .Accordion_Label_Opener:hover {
  32.       font-weight: bold;
  33.       color: #767;
  34.       background: #5ef;
  35.       cursor: pointer;
  36.     }
  37.  
  38.     .Accordion_Radio {
  39.       display: none;
  40.     }
  41.  
  42.   </style>
  43. </head>
  44. <body>
  45.   <div class="Accordion_Container">
  46.     <label class="Accordion_Label_Opener" for="Tab-001-001">いろはにほへと ちりぬるを</label>
  47.     <label class="Accordion_Label_Opener" for="Tab-001-002">わかよたれそ つねならむ</label>
  48.     <label class="Accordion_Label_Opener" for="Tab-001-003">うゐのおくやま けふこえて</label>
  49.     <label class="Accordion_Label_Opener" for="Tab-001-004">あさきゆめみし ゑひもせす</label>
  50.     <br>
  51.  
  52.     <input id="Tab-001" type="radio" name="Tab-001" class="Accordion_Radio" checked>
  53.  
  54.     <input id="Tab-001-001" type="radio" name="Tab-001" class="Accordion_Radio">
  55.     <div class="Accordion_Content">
  56.       【色は匂えど　散りぬるを】<br>
  57.       『花は咲いても散ってしまうのに』<br>
  58.     </div>
  59.  
  60.     <input id="Tab-001-002" type="radio" name="Tab-001" class="Accordion_Radio">
  61.     <div class="Accordion_Content">
  62.       【我が世誰ぞ　常ならん】<br>
  63.       『永遠に同じ姿でこの世に居続ける人も物もない』<br>
  64.     </div>
  65.  
  66.     <input id="Tab-001-003" type="radio" name="Tab-001" class="Accordion_Radio">
  67.     <div class="Accordion_Content">
  68.       【有為の奥山　今日超えて】<br>
  69.       『つらく・きびしく・険しい人生という山を今日も一つ乗り越えて』<br>
  70.     </div>
  71.  
  72.     <input id="Tab-001-004" type="radio" name="Tab-001" class="Accordion_Radio">
  73.     <div class="Accordion_Content">
  74.       【浅き夢見し　酔ひもぜず】<br>
  75.       『酔っ払っているかのように、真理から目を背け、はかない夢を見ないように』<br>
  76.     </div>
  77.   </div>
  78. </body>
  79. </html>
  80.  
Success #stdin #stdout 0.03s 25356KB
comments (?)
stdin
copy 
Standard input is empty
stdout
copy 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!--
metaタグでcharsetをUTF-8に設定しています。
(モチロン他のキャラクターセットに変更しても良いですが)必ずcharsetに設定されているキャラクターセットでセーブして下さい。
-->
  <title></title>
  <style>
    .Accordion_Container {}

    .Accordion_Label_Opener {
      font-weight: bold;
      color: #fef;
      background: #0bb;
    }

    .Accordion_Content {
      display: none;
      border: solid thin #000;
      border-radius: 0.5rem;
      padding: 0.25rem;
      margin: 0.25rem;
    }

    .Accordion_Radio:checked+.Accordion_Content {
      display: block;
    }

    .Accordion_Label_Opener:hover {
      font-weight: bold;
      color: #767;
      background: #5ef;
      cursor: pointer;
    }

    .Accordion_Radio {
      display: none;
    }

  </style>
</head>
<body>
  <div class="Accordion_Container">
    <label class="Accordion_Label_Opener" for="Tab-001-001">いろはにほへと ちりぬるを</label>
    <label class="Accordion_Label_Opener" for="Tab-001-002">わかよたれそ つねならむ</label>
    <label class="Accordion_Label_Opener" for="Tab-001-003">うゐのおくやま けふこえて</label>
    <label class="Accordion_Label_Opener" for="Tab-001-004">あさきゆめみし ゑひもせす</label>
    <br>

    <input id="Tab-001" type="radio" name="Tab-001" class="Accordion_Radio" checked>

    <input id="Tab-001-001" type="radio" name="Tab-001" class="Accordion_Radio">
    <div class="Accordion_Content">
      【色は匂えど　散りぬるを】<br>
      『花は咲いても散ってしまうのに』<br>
    </div>

    <input id="Tab-001-002" type="radio" name="Tab-001" class="Accordion_Radio">
    <div class="Accordion_Content">
      【我が世誰ぞ　常ならん】<br>
      『永遠に同じ姿でこの世に居続ける人も物もない』<br>
    </div>

    <input id="Tab-001-003" type="radio" name="Tab-001" class="Accordion_Radio">
    <div class="Accordion_Content">
      【有為の奥山　今日超えて】<br>
      『つらく・きびしく・険しい人生という山を今日も一つ乗り越えて』<br>
    </div>

    <input id="Tab-001-004" type="radio" name="Tab-001" class="Accordion_Radio">
    <div class="Accordion_Content">
      【浅き夢見し　酔ひもぜず】<br>
      『酔っ払っているかのように、真理から目を背け、はかない夢を見ないように』<br>
    </div>
  </div>
</body>
</html>
https://ideone.com/myjh1C
language:
PHP (php 7.3.5)
created:
1 year ago
visibility:
secret

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!