web-dev-qa-db-ja.com

jQueryを使用せずにHTMLおよびCSSでクリック時に非表示divを表示

ここにあるTheming collapsible headersに非常に似たものが欲しい：

http://jquerymobile.com/demos/1.2.0-alpha.1/docs/content/content-collapsible.html

JQueryを使用しない場合、これは可能ですか？

モバイルサイト用ですが、ページは常にオフラインになるので、jqueryを使いたくありません。また、jquery mobileにカスタムスタイリングを与えることは、純粋なcssを使用して自分でスタイリングするよりもかなり困難です。

javascripthtmlcsshtml5css3
27
dev6546

labelおよびcheckbox入力の使用

選択したアイテムを開いたまま切り替え可能にします。

.collapse{
  cursor: pointer;
  display: block;
  background: #cdf;
}
.collapse + input{
  display: none; /* hide the checkboxes */
}
.collapse + input + div{
  display:none;
}
.collapse + input:checked + div{
  display:block;
}
<label class="collapse" for="_1">Collapse 1</label>
<input id="_1" type="checkbox"> 
<div>Content 1</div>

<label class="collapse" for="_2">Collapse 2</label>
<input id="_2" type="checkbox">
<div>Content 2</div>

labelおよび名前付きradio入力の使用

チェックボックスと同様に、すでに開いているものを閉じます。
両方の入力でname="c1" type="radio"を使用します。

.collapse{
  cursor: pointer;
  display: block;
  background: #cdf;
}
.collapse + input{
  display: none; /* hide the checkboxes */
}
.collapse + input + div{
  display:none;
}
.collapse + input:checked + div{
  display:block;
}
<label class="collapse" for="_1">Collapse 1</label>
<input id="_1" type="radio" name="c1"> 
<div>Content 1</div>

<label class="collapse" for="_2">Collapse 2</label>
<input id="_2" type="radio" name="c1">
<div>Content 2</div>

tabindexおよび:focusの使用

radio入力と同様に、さらに次を使用して状態をトリガーできます。 Tab キー。
アコーディオンの外側をクリックすると、開いているすべてのアイテムが閉じます。

.collapse > a{
  background: #cdf;
  cursor: pointer;
  display: block;
}
.collapse:focus{
  outline: none;
}
.collapse > div{
  display: none;
}
.collapse:focus div{
  display: block; 
}
<div class="collapse" tabindex="1">
  <a>Collapse 1</a>
  <div>Content 1....</div>
</div>

<div class="collapse" tabindex="1">
  <a>Collapse 2</a>
  <div>Content 2....</div>
</div>

:targetを使用

radio入力を使用するのと同様に、さらに使用できます Tab そして ⏎ 操作するキー

.collapse a{
  display: block;
  background: #cdf;
}
.collapse > div{
  display:none;
}
.collapse > div:target{
  display:block; 
}
<div class="collapse">
  <a href="#targ_1">Collapse 1</a>
  <div id="targ_1">Content 1....</div>
</div>

<div class="collapse">
  <a href="#targ_2">Collapse 2</a>
  <div id="targ_2">Content 2....</div>
</div>

<detail>および<summary>タグの使用（純粋なHTML）

HTML5の詳細タグと要約タグを使用すると、CSSスタイルやJavascriptを使用せずにこの問題を解決できます。これらのタグは、Internet Explorer（またはMicrosoft Edge）ではサポートされていないことに注意してください。

<details>
  <summary>Collapse 1</summary>
  <p>Content 1...</p>
</details>
<details>
  <summary>Collapse 2</summary>
  <p>Content 2...</p>
</details>
95
Roko C. Buljan

checkboxを使用してsimulateonClickと[〜＃〜] css [〜＃〜]：

input[type=checkbox]:checked + p {
    display: none;
}

JSFiddle

隣接する兄弟セレクター

8
Vucko

Rokoの回答が好きで、要素を非表示にすると表示され、下に表示されると三角形が表示されるように、数行追加しました。

.collapse { font-weight: bold; display: inline-block; }
.collapse + input:after { content: " \25b6"; display: inline-block; }
.collapse + input:checked:after { content: " \25bc"; display: inline-block; }
.collapse + input { display: inline-block; -webkit-appearance: none; -o-appearance:none; -moz-appearance:none;  }
.collapse + input + * { display: none; }
.collapse + input:checked + * { display: block; }
3
John Chew

もちろん！ jQueryは、結局JavaScriptを利用する単なるライブラリです。

Document.getElementByIdを使用して問題の要素を取得し、element.style.heightを使用してそれに応じて高さを変更できます。

elementToChange = document.getElementById('collapseableEl');
elementToChange.style.height = '100%';

前後に切り替えるのに役立つきちんとした小さな機能でそれをラップすると、あなた自身に解決策があります。

2
Ben