折りたたみ可能な純粋なCSSの実装

投稿日: 2022-04-20 2022-04-20
タグ: css

折りたたみ可能なウィジェットは、縮小および拡張できるコンテンツのセクションを作成するための一般的な方法です。そこにはたくさんの異なる実装があります。ここでは、チェックボックス入力要素、ラベル要素、および：checked 疑似セレクターのおかげで、追加のJavaScriptを必要とせずにそのようなウィジェットを作成できます。

折りたたみ可能なものは次のようになります。

CodePenのalligatorio（ @alligatorio ）によるペンKKzWqVXを参照してください。

そして、これがそのHTMLマークアップです。

<div class="wrap-collabsible">
  <input id="collapsible" class="toggle" type="checkbox">
  <label for="collapsible" class="lbl-toggle">More Info</label>
  <div class="collapsible-content">
    <div class="content-inner">
      <p>
        QUnit is by calling one of the object that are embedded in JavaScript, and faster JavaScript program could also used with
        its elegant, well documented, and functional programming using JS, HTML pages Modernizr is a popular browsers without
        plug-ins. Test-Driven Development.
      </p>
    </div>
  </div>
</div>

折りたたみ式をデフォルトで開く場合は、チェックボックスのチェック済み属性を設定するだけです。

<input id="collapsible2" class="toggle" type="checkbox" checked>

CodePenのalligatorio（ @alligatorio ）によるペンqBZrjqGを参照してください。

各ラベルは正しいチェックボックスに関連付ける必要があるため、各チェックボックス要素には一意の id が必要であり、各ラベルのfor属性は対応するチェックボックスのIDを指す必要があることに注意してください。

折りたたみ可能なスタイリング

スタイルを少しずつ分解してみましょう…

まず、チェックボックス要素をdisplay: noneに設定します。チェックボックスは非表示になり、そのラベルがチェックまたはチェック解除の代わりに使用されます。後で、CSS ：checked 疑似セレクターを使用して、非表示のチェックボックスがオンになっているときにスタイルを変えることがわかります。

input[type='checkbox'] {
  display: none;
}

次に、デフォルトのラベルのスタイルを設定します。ここでは、display: blockを使用してラベルをブロック要素として表示することを除いて、特別なことは何も行われていません。

.lbl-toggle {
  display: block;

  font-weight: bold;
  font-family: monospace;
  font-size: 1.2rem;
  text-transform: uppercase;
  text-align: center;

  padding: 1rem;

  color: #A77B0E;
  background: #FAE042;

  cursor: pointer;

  border-radius: 7px;
  transition: all 0.25s ease-out;
}

.lbl-toggle:hover {
  color: #7C5A0B;
}

小さな矢印の場合、境界線を巧妙に使用すると、三角形を簡単に作成できます。

.lbl-toggle::before {
  content: ' ';
  display: inline-block;

  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid currentColor;

  vertical-align: middle;
  margin-right: .7rem;
  transform: translateY(-2px);

  transition: transform .2s ease-out;
}

CSSトライアングルのすべてのニーズについては、CSS-Tricksのこの投稿を参照してください。

また、 currentColor 組み込み変数を使用して、三角形がラベルのテキストと同じ色になるようにしたことにお気づきかもしれません。

また、内部コンテンツにいくつかの基本的なスタイルを与えましょう。

.collapsible-content .content-inner {
  background: rgba(250, 224, 66, .2);
  border-bottom: 1px solid rgba(250, 224, 66, .45);

  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  padding: .5rem 1rem;
}

これで、興味深い部分から始めることができます。デフォルトでは、 collapsible-contentdivのmax-height値は0pxになり、完全に非表示になります。

.collapsible-content {
  max-height: 0px;
  overflow: hidden;

  transition: max-height .25s ease-in-out;
}

折りたたみ式のチェックボックスがそのラベルをクリックして舞台裏でチェックされると、コンテンツdivを十分に高い max-height 値に設定して、すべての内部コンテンツを表示できるようにします。

手動で適切な高さを計算する代わりに、100vhのようなビューポートユニットを使用することもできます。 100％のようなものを使用することもできますが、トランジションを使用する機能が失われます。折りたたみ可能なコンテンツはビューポートよりも高い可能性があると思われる場合は、100% ifのようなものを使用することをお勧めします。

チェックボックスがオンになっている場合、隣接する兄弟セレクター（ + ）を使用してコンテンツdivを選択します。

.toggle:checked + .lbl-toggle + .collapsible-content {
  max-height: 100vh;
}

ハードコードされた高さの使用を避け、任意の高さのコンテンツを折りたたみ可能なものに配置できるようにするため、heightの代わりにmax-heightを使用します。

そして今、隣接する兄弟セレクターを使用して、折りたたみ可能なものが展開されたときに小さな三角形を回転させ、ラベルの右下と左下の半径を調整するために、本当に似たようなことをします。

.toggle:checked + .lbl-toggle::before {
  transform: rotate(90deg) translateX(-3px);
}

.toggle:checked + .lbl-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

そして、あなたはそれを持っています！スクリプトをまったく使用せずに折りたたみ可能なセクションを作成する非常に簡単な方法。

アクセシビリティに関する注記

現在のように、折りたたみ可能なウィジェットには実際にはアクセスできません。アクセスできるようにするには、JavaScriptを少し追加する必要があります。私は知っています、私は知っています、すべてがゼロのJavaScriptを使用して実装されることになっています。何と言えばいい！

アクセシビリティ技術は絶えず改善されています。これをアクセシブルにするためのより良い方法がある場合は、以下にコメントを残してください。

次のスクリプトでは、すべてのトグルラベルを選択し、キーダウンイベントをリッスンします。押されたキーがenterまたはスペースバーキーのいずれかである場合、ラベルのクリックをトリガーします。

let myLabels = document.querySelectorAll('.lbl-toggle');

Array.from(myLabels).forEach(label => {
  label.addEventListener('keydown', e => {
    // 32 === spacebar
    // 13 === enter
    if (e.which === 32 || e.which === 13) {
      e.preventDefault();
      label.click();
    };
  });
});

ラベルをフォーカス可能にするために、tabindex="0"を追加します。

<label for="collapsible3" class="lbl-toggle" tabindex="0">With A11y</label>

CodePenのalligatorio（ @alligatorio ）によるペンOJNpgpbを参照してください。

すべてのスタイル

参考までに、一度にフルセットのスタイルを示します。

.wrap-collabsible {
  margin-bottom: 1.2rem 0;
}

input[type='checkbox'] {
  display: none;
}

.lbl-toggle {
  display: block;

  font-weight: bold;
  font-family: monospace;
  font-size: 1.2rem;
  text-transform: uppercase;
  text-align: center;

  padding: 1rem;

  color: #A77B0E;
  background: #FAE042;

  cursor: pointer;

  border-radius: 7px;
  transition: all 0.25s ease-out;
}

.lbl-toggle:hover {
  color: #7C5A0B;
}

.lbl-toggle::before {
  content: ' ';
  display: inline-block;

  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid currentColor;
  vertical-align: middle;
  margin-right: .7rem;
  transform: translateY(-2px);

  transition: transform .2s ease-out;
}

.toggle:checked + .lbl-toggle::before {
  transform: rotate(90deg) translateX(-3px);
}

.collapsible-content {
  max-height: 0px;
  overflow: hidden;
  transition: max-height .25s ease-in-out;
}

.toggle:checked + .lbl-toggle + .collapsible-content {
  max-height: 100vh;
}

.toggle:checked + .lbl-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.collapsible-content .content-inner {
  background: rgba(250, 224, 66, .2);
  border-bottom: 1px solid rgba(250, 224, 66, .45);
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  padding: .5rem 1rem;
}

🌈ほぼCSSのみの折りたたみ可能なファンシーをお楽しみください！

getdocs

13036