There is an innovative Pure-CSS accordion that caught my eye, but I have a unique feature in mind that I would like to incorporate. What I am looking for is the ability for the labels to dynamically change based on the state of the checkboxes without relying on JavaScript.
Here's what I envision:
- If the checkbox is unchecked, the question should display "more info",
- If the checkbox is checked, it should show "less info" as the question text.
I am open to using various elements to achieve this; the label element does not necessarily have to be the one undergoing changes. However, it is crucial that the solution preserves the functionality allowing users to expand the accordion by either clicking on the text within the label element or the plus sign housed in the class plus. Importantly, the solution must be entirely free from JavaScript.
A quick note: solutions that avoid incorporating the question text with pseudo-elements will be preferred over those that do. The rationale behind this preference is my intention to utilize first-line to style the first line of the question text. Combining pseudo-elements could potentially restrict the use of first-line.
I'm curious and excited to see if this concept can be realized! Thank you for your input! This is the corresponding codepen: http://codepen.io/ihatecoding/pen/oZjVPG
This is the snippet:
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,800);
body {
font-family: 'Open Sans';
font-size: 1.5em;
background: #eee;
}
.question-content {
width: 80%;
padding: 20px;
margin: 0 auto;
padding: 0 60px 0 0;
}
.question {
position: relative;
background: #8FBC8F;
margin: 0;
padding: 10px 10px 10px 50px;
display: block;
width:100%;
cursor: pointer;
}
.answers {
background: #999;
padding: 0px 15px;
margin: 5px 0;
height: 0;
overflow: hidden;
z-index: -1;
position: relative;
opacity: 0;
-webkit-transition: .7s ease;
-moz-transition: .7s ease;
-o-transition: .7s ease;
transition: .7s ease;
}
.questions:checked ~ .answers{
height: auto;
opacity: 1;
padding: 15px;
}
.plus {
position: absolute;
margin-left: 10px;
z-index: 5;
font-size: 2em;
line-height: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
transition: .3s ease;
pointer-events: none;
}
.questions:checked ~ .plus {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.questions {
display: none;
}<div class="question-content">
<div>
<input type="checkbox" id="question1" name="q" class="questions">
<div class="plus">+</div>
<label for="question1" class="question">
More Info Q1
</label>
<div class="answers">
What if the answer is really long and wraps the whole page and you never want to finish it but you have to because its the answer!
</div>
</div>
<div>
<input type="checkbox" id="question2" name="q" class="questions">
<div class="plus">+</div>
<label for="question2" class="question">
More Info Q2
</label>
<div class="answers">
short!
</div>
</div>
<div>
<input type="checkbox" id="question3" name="q" class="questions">
<div class="plus">+</div>
<label for="question3" class="question">
More Info Q3
</label>
<div class="answers">
This is the answer!
</div>
</div>
</div>