純粋なCSSの折りたたみ/展開div


91

psuedoclassを使用する他の誰かのコードに基づく純粋なCSS折りたたみ可能divがあり:targetます。私が設定しようとしているのは、12以上の質問があるページで、+ボタンをクリックすると、回答divが下に展開されます。大量の追加のCSSを記述せずに、このページで複数の折りたたみdiv要素を作成する方法を理解することはできません。私のCSSコードが最小化されるようにこれを書く方法について誰かが提案を持っていますか?(つまり、12以上の質問ごとに一意のセレクターを入力する必要はありません)。

これはJSを許可しないwordpress.comサイトで行われているため、Javascriptを使用できません。

これが私のjfiddleです:http://jsfiddle.net/dmarvs/94ukA/4/

<div class="FAQ">
    <a href="#hide1" class="hide" id="hide1">+</a>
    <a href="#show1" class="show" id="show1">-</a>
    <div class="question"> Question Question Question Question Question Question Question Question Question Question Question? </div>
        <div class="list">
            <p>Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer </p>
        </div>
</div>
/* source: http://www.ehow.com/how_12214447_make-collapsing-lists-java.html */

.FAQ { 
    vertical-align: top; 
    height:auto !important; 
}
.list {
    display:none; 
    height:auto;
    margin:0;
    float: left;
}
.show {
    display: none; 
}
.hide:target + .show {
    display: inline; 
}
.hide:target {
    display: none; 
}
.hide:target ~ .list {
    display:inline; 
}

/*style the (+) and (-) */
.hide, .show {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    font-size: 20px;
    color: #fff;
    text-shadow: 0 1px 0 #666;
    text-align: center;
    text-decoration: none;
    box-shadow: 1px 1px 2px #000;
    background: #cccbbb;
    opacity: .95;
    margin-right: 0;
    float: left;
    margin-bottom: 25px;
}

.hide:hover, .show:hover {
    color: #eee;
    text-shadow: 0 0 1px #666;
    text-decoration: none;
    box-shadow: 0 0 4px #222 inset;
    opacity: 1;
    margin-bottom: 25px;
}

.list p{
    height:auto;
    margin:0;
}
.question {
    float: left;
    height: auto;
    width: 90%;
    line-height: 20px;
    padding-left: 20px;
    margin-bottom: 25px;
    font-style: italic;
}

6
ワードプレスを使用していないこれを見ている人には、これをしないでくださいと言ってください。そのハックとそれは非常に迷惑なページのバック機能を壊します。
gbtimmon 2013

回答:


104

サポートしようとしているブラウザ/デバイス、または非準拠のブラウザに耐える準備ができているものに応じて、<summary>およびをチェックすることをお勧めします。<detail>タグます。それらはまさにこの目的のためのものです。折りたたみと表示はタグの定義/フォーマットの一部であるため、cssはまったく必要ありません。

私はここで例を作りました:

<details>
<summary>This is what you want to show before expanding</summary>
<p>This is where you put the details that are shown once expanded</p>
</details>

ブラウザのサポートはさまざまです。最良の結果を得るには、Webkitで試してください。他のブラウザでは、デフォルトですべてのソリューションが表示される場合があります。おそらく、上記の非表示/表示方法にフォールバックできます。


2
バグ591737は、Firefoxのサポートを追跡するバグです。
ShreevatsaR 2014年

9
2016年のほぼ半ばであり、これに対するサポートは存在しません。絶対にこのソリューションを使用しないでください。
ドウェイン

3
@DigitalSeaのサポートが「存在しない」というのは誤りであり、「このソリューションを絶対に使用しない」というのは、数年間安定していて、2010年からポリフィルが利用可能になっている標準の強力な言葉です。mathiasbynens.be/ notes / html5-details- jquery。あなたの議論の根拠は何ですか?MS Edgeは、Firefoxがsummary / detailタグを実装するとすぐにこれらのタグを実装する可能性があります(ただし、現在はフラグの後ろにあります)Chrome 12以降、OSXおよびiOSBlink派生ブラウザーのsafariと同様にWebkitはデフォルトでサポートしています-chromemobile / desktop、オペラはデフォルトでそれをサポートします
Thurstan

1
@Thurstanサポートなし。IE8、IE9、IE10、IE11、Edge 13、2016年8月までFirefoxでサポートされていません。したがって、IEのサポートを完全に放棄し、現在EdgeとFirefoxのサポートを完全に放棄する余裕がない限り、十分にサポートされていません。ポリフィルは基本的に、Javascript(jQueryなし)ですでに実行できることを非常に効率的に実行します。自分で簡単に実装できるこの機能のポリフィルはやり過ぎです。リンクしたソリューションは、不要なjQueryを使用しています。とにかくいつかこれが仕様から削除されたのを見ても驚かないでしょう。
ドウェインチャーリントン2016

4
私は最新のブラウザー専用に開発しており、この手法は私のユースケースで完全に機能し、CSSをなめる必要はありませんでした。
Josh Habdas 2017

39

<summary>およびの使用<details>

<summary>and<details>要素の使用は最も簡単ですが、現在のIEはサポートしていないためブラウザーのサポートを参照してください。ただし、ポリフィルすることはできます(ほとんどはjQueryベースです)。サポートされていないブラウザはもちろん拡張バージョンを表示するだけなので、場合によっては許容できることに注意してください。

/* Optional styling */
summary::-webkit-details-marker {
  color: blue;
}
summary:focus {
  outline-style: none;
}
<details>
  <summary>Summary, caption, or legend for the content</summary>
  Content goes here.
</details>

要素のスタイルを設定する方法<details>(HTML5 Doctor)も参照してください(少し注意が必要です)。

純粋なCSS3

:targetセレクタはかなり良い持っているブラウザのサポートを、そして、作るために使用することができ、単一のフレーム内で折りたたみ可能な要素を。

.details,
.show,
.hide:target {
  display: none;
}
.hide:target + .show,
.hide:target ~ .details {
  display: block;
}
<div>
  <a id="hide1" href="#hide1" class="hide">+ Summary goes here</a>
  <a id="show1" href="#show1" class="show">- Summary goes here</a>
  <div class="details">
    Content goes here.
  </div>
</div>
<div>
  <a id="hide2" href="#hide2" class="hide">+ Summary goes here</a>
  <a id="show2" href="#show2" class="show">- Summary goes here</a>
  <div class="details">
    Content goes here.
  </div>
</div>


1
<summary><details>それでも、すべての主要なブラウザで機能するとは限りません。
神経伝達物質2016

4
@TranslucentCloudそれは私が言ったことです。;)
2016

そしてまた、これは他の回答の作者によって言われました。
神経伝達物質2016

1
これにトランジションアニメーションを追加する方法はありますか?
azizj1 2017年

1
CSSトランジションを使用してテキストが下にスライドし、フェードインするアニメーションバージョンについては、このブログ投稿を
SketchyTech

25

@gbtimmonの答えは素晴らしいですが、方法は複雑すぎます。私は彼のコードを可能な限り単純化しました。

#answer,
#show,
#hide:target {
    display: none; 
}

#hide:target + #show,
#hide:target ~ #answer {
    display: inherit; 
}
<a href="#hide" id="hide">Show</a>
<a href="#/" id="show">Hide</a>
<div id="answer"><p>Answer</p></div>


3
CSS3での作業は時々とてもやりがいがあります:
mrmut 2018

これは、同じページで複数回使用した場合は機能しません。[非表示/表示]をクリックすると、すべてのdivに影響します。複数回使用したときに機能するように変更する方法を知っている人はいますか?
phhu

更新:@WernightのCSSは以下にのみ回答します(「純粋なCSS3」、これと同様のCSSですが、クラスを使用しています)。同じページの複数のdivで機能します。
phhu

1
@phhuはい、同じIDを再利用すると機能しません。あなたはIDの他のセットをご紹介しますならば、それは動作します(hide2show2answer2など)。またはクラス、それは問題ではありません。
神経伝達物質

22

2つのリンクのアンカーを繰り返す必要があります。

<a href="#hide2" class="hide" id="hide2">+</a>
<a href="#show2" class="show" id="show2">-</a>

このjsfiddleを参照してくださいhttp://jsfiddle.net/eJX8z/

また、フォーマットを改善するために、FAQ呼び出しにマージンを追加しました。


ありがとうございました!私はそれを試しましたが、何らかの理由でうまくいきませんでした。捕まえたことのないバグがあったに違いない。
dmarvs 2013

18

または、CSSがほとんどない超シンプルなバージョン:)

<style>   
.faq ul li {
    display:block;
    float:left;
    padding:5px;
}

.faq ul li div {
    display:none;
}

.faq ul li div:target {
    display:block;
}


</style>


<div class="faq">
   <ul>
   <li><a href="#question1">Question 1</a>   
   <div id="question1">Answer 1 </div>
   </li>


   <li><a href="#question2">Question 2</a>
   <div id="question2">Answer 2 </div>
   </li>
   <li><a href="#question3">Question 3</a>
   <div id="question3">Answer 3 </div>
   </li>
   <li><a href="#question4">Question 4</a>
   <div id="question4">Answer 4 </div>
   </li>
   <li><a href="#question5">Question 5</a>
   <div id="question5">Answer 5 </div>
   </li>
   <li><a href="#question6">Question 6</a>
   <div id="question6">Answer 6 </div>
   </li>
   </ul>  
</div>

http://jsfiddle.net/ionko22/4sKD3/


ちなみに、:targetはIE8以前では機能しないことを忘れてしまいました。驚きです!また、css PIEもそれを支援しないため、ブラウザーの互換性に関心がある場合は、jQueryオプションを検討することをお勧めします。
Ionko Gueorguiev 2013

ありがとう、それはずっときれいです。潜在的なターゲットオーディエンスの約3分の1がIE8を使用します。ロード時にすべてのdivを開く条件付きCSSを追加することを考えていました。
dmarvs 2013

タブ付きのインターフェースがあなたにとって正しい解決策かもしれないと思います。しばらく前にダウンロード/チェックアウトできます:ionko.com/index.php/work/simple-and-flexible-tabs
Ionko Gueorguiev 2013
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.