ejemplos - CSS puro contraer/expandir div
wrapper html que es (5)
Usando <summary> y <details>
El uso de elementos <summary> y <details> es el más simple, pero se puede ver el soporte del navegador ya que el IE actual no lo soporta. Sin embargo, puedes realizar polyfill (la mayoría están basados en jQuery). Tenga en cuenta que el navegador no compatible simplemente mostrará la versión expandida del curso, por lo que puede ser aceptable en algunos casos.
/* 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>
Vea también cómo diseñar el elemento <details> (HTML5 Doctor) (un poco complicado).
Pure CSS3
El selector de :target tiene un soporte de navegador bastante bueno, y se puede usar para crear un único elemento colapsable dentro del marco.
.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>
Tengo un div CSS colapsable puro que se basa en el código de otra persona que usa el :target psuedoclass. Lo que estoy tratando de configurar es una página con más de 12 preguntas, y cuando haces clic en el botón +, la respuesta div se expande debajo. No puedo descifrar cómo hacer múltiples elementos Div colapsados en esta página sin escribir mucho CSS adicional. ¿Alguien tiene sugerencias sobre cómo escribir esto para que mi código CSS esté minimizado? (es decir, no tengo que ingresar un grupo de selectores únicos para cada una de las más de 12 preguntas).
No puedo usar Javascript porque esto va en un sitio de wordpress.com que no permite JS.
Aquí está mi 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;
}
Dependiendo de qué navegadores / dispositivos está buscando admitir, o qué está preparado para soportar para los navegadores no compatibles, es posible que desee consultar las etiquetas <summary> y <detail> . Son para este propósito. No se requiere ninguna CSS ya que el colapso y la visualización son parte de la definición / formato de las etiquetas.
He hecho un ejemplo here :
<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>
El soporte del navegador varía. Pruebe en webkit para obtener los mejores resultados. Otros navegadores pueden mostrar todas las soluciones de manera predeterminada. Quizás pueda recurrir al método hide / show descrito anteriormente.
La respuesta de gbtimmon es genial, pero muy complicada. He simplificado su código tanto como sea posible.
#answer,
#show,
#hide:target {
display: none;
}
#hide:target + #show,
#hide:target ~ #answer {
display: initial;
}
<a href="#hide" id="hide">Show</a>
<a href="#" id="show">Hide</a>
<div id="answer"><p>Answer</p></div>
O una versión súper simple con apenas 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>
Solo necesita iterar los anclajes en los dos enlaces.
<a href="#hide2" class="hide" id="hide2">+</a>
<a href="#show2" class="show" id="show2">-</a>
Ver este jsfiddle http://jsfiddle.net/eJX8z/
También agregué un poco de margen a la llamada de preguntas frecuentes para mejorar el formato.