纯CSS折叠/展开div

我有一个纯粹的CSS collapsable div，它基于使用:target psuedoclass的其他人的代码。 我试图设置的是一个有12个以上问题的页面，当你点击+button时，答案div就会展开。 我无法弄清楚如何在这个页面上创build多个折叠div元素，而不需要编写大量额外的CSS。 任何人都有如何写这个build议，所以我的CSS代码是最小化？ （也就是说，所以我不必为12个以上的问题input一堆独特的select器）。

我不能使用Javascript，因为这是一个不允许JS的wordpress.com网站。

这是我的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; }

根据您希望支持哪些浏览器/设备，或者您准备应付不兼容的浏览器，您可能需要查看<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中获得最佳结果。 其他浏览器可能会默认显示所有的解决scheme。 您可以回退到上述的隐藏/显示方法。

你只需要在两个链接中迭代锚点。 

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

看到这个jsfiddle http://jsfiddle.net/eJX8z/

我还在FAQ调用中增加了一些保证金来改进格式。

或者几乎没有任何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/

使用<summary>和<details>

使用<summary>和<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>

@gbtimmon的答案很好，但方式太复杂了。 我尽可能地简化了他的代码。 

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

像这样的东西？ 

 document.getElementById("control").addEventListener('click', function() { var props = document.getElementsByClassName("property"); for (var i = 0; i < props.length; i++) { props[i].classList.toggle("show"); } }); 
 #control{ height:24px; width:24px; background:blue; } .property{ height:0px; overflow: hidden; transition: 4s ease-in-out; font-size:0px; margin:0; border:1px solid green; } .show{ height:1em; overflow:initial; font-size:12px; } 
 <div id="control"></div> <div class="property">red</div> <div class="property">blue</div> <div class="property">green</div>
Interesting Posts